리액트의 데이터 흐름은 간단히 말해서 단방향 흐름이다. 리액트의 데이터 흐름은 하향식, 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달된다.
컴포넌트 구조: 상향식
React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다.
기획자나 PM, UX 디자이너로부터 앱의 디자인을 전달받으면, 먼저 컴포넌트 계층 구조로 나누어 컴포넌트를 만들고 조립한다.
컴포넌트 구조는 상향식 앱으로 만든다.
데이터의 흐름: 하향식
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. 즉, 데이터 전달의 주체는 부모 컴포넌트가 되는데, 이는 곧 데이터가 부모~자식으로 감을 의미한다. 하향식 데이터 흐름은 리액트의 대표적인 키워드 중 하나이다. 자식 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.
이는 단순히 코드를 쉽고 단순하게 만드려는 목적을 넘어, 유지보수를 좀더 쉽게 함에 그 의미가 있다.
데이터의 정의
state가 많아질수록 어플리케이션은 복잡해지기 때문에 state는 최소화하는 것이 좋다. 아래의 기준에 부합한다면 state로 만들지 않는 것이 좋다.
- 부모로부터 props를 통해 전달되는가? (---> 확실하게 state가 아님)
- 시간이 지나도 변하지 않는가? (---> 확실하게 state가 아님)
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? (---> state가 아님)
상태의 위치는 상태가 특정한 컴포넌트에서만 유의미하면 해당 컴포넌트에 위치시킨다.
만약 두 개의 서로 다른 컴포넌트가 특정 상태에 의존적일 경우, 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치시킨다. 즉, 두 자식의 공통적인 부모 컴포넌트에 상태를 위치시키는 것이다.
상태 끌어올리기
React에서 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식(top-down)(그리고 단방향) 데이터 흐름(one-way data flow)을 따른다. 만약 하나의 state가 여러 컴포넌트에서 사용하고 state에 영향을 준다면, 해당 컴포넌트들 간의 가장 가까운 공통의 상위 컴포넌트(다시말해, 부모 컴포넌트)에 state를 끌어올리면 된다. 이것을 state 끌어올리기(Lifting state up)라고 한다.
실제는 하위 컴포넌트에서 이벤트가 발생해 상위 컴포넌트의 state를 갱신하는 경우가 존재하며, 이경우엔 데이터가 마치 역방향으로 흘러가는 것처럼 보인다. React에서 제시한 방법은 상위 컴포넌트에 정의된 상태를 변경하는 함수(handler) 자체를 하위 컴포넌트에 props로 전달하고, 하위 컴포넌트에서 이 콜백 함수를 실행하는 것이다. 이렇게 하면 단방향 데이터 흐름의 원칙을 지킬 수 있다.
즉, 상위 컴포넌트의 "state를 변경하는 함수" 그 자체를 하위 컴포넌트로 props를 통해 전달하고, 이 함수를 하위 컴포넌트가 실행하는 방식이다.
