React의 데이터 흐름

• 리액트의 데이터 흐름은 단방향이다.
• 부모에서 자식으로만 전달이 가능하다.
• props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 또는 함수이다.

props drilling

• props가 자식에게 넘겨주는 단계가 두단계 이상이 될 경우를 props drilling이 일어났다고 한다.
• 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는 것이 난해해진다.
• props drilling을 방지하기 위해서 global state를 이용하는 것이 좋다.

emotion에 props 던지기

• emotion으로 만들어진 태그에도 props를 전달할 수 있다.
• 즉, props를 활용하여 CSS를 변경할 수 있다.

export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;

• onClick, onMouseOver, onMouseLeave 등 on 으로 시작되는 속성에 사용
• 특정 상황에서 CSS를 변경하는 것은 모두 emotion으로 props를 전달함으로써 만들 수 있다.

state re-rendering

• setState는 비동기로 작동한다.
• 따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링한다.

re-render 가 되는 상황

1. 새로운 props가 들어올 때
2. 부모 컴포넌트가 렌더링 될 때
3. 강제 업데이트 (forceUpdate)가 실행될 때
4. state가 변경될 때