React의 데이터 흐름
리액트는 상향식(bottom-up)으로 앱을 만든다.
다시 말하면 페이지 단위가 아닌 컴포넌트, 즉, 기능 단위로 개발하고 이를 조립한다. 앱을 구성하는 기본 유닛인 각 컴포넌트를 먼저 만듦으로써, 얻는 이점은 확장과 테스트가 용이하다는 것이다. 따라서 기획자나 디자이너로부터 앱 디자인을 전달받으면 이를 컴포넌트 계층 구조로 먼저 나눠봐야 한다.
컴포넌트는 props를 이용하여 외부에서 데이터를 인자나 속성처럼 전달받을 수 있다.
데이터를 전달하는 주체는 부모 컴포넌트이며, 받는 쪽은 자식 컴포넌트이다. 즉, 데이터 흐름에 있어서는 앱 개발과 달리 하향식(top-down)이다. 이러한 단방향 데이터 흐름(one-way data flow)은 리액트의 주요 키워드이다.
데이터에는 변하는 값과 변하지 않는 값이 있다.
사용자 입력은 이벤트에 따라 얼마든지 변할 수 있다. 즉, 이는 상태(state)이다. 데이터가 추가 및 삭제될 수 있다면 이 역시 state이다.
state가 많을수록 앱이 복잡해지기 때문에 최소화하는 것이 좋다.
state 여부를 판단하는 기준은 세 가지가 있다.
1. 부모 컴포넌트로부터 props를 통해 전달된다면 state가 아니다
2. 시간이 지나도 변하지 않으면 state가 아니다
3. 컴포넌트 안의 다른 state나 props로 계산이 가능하다면 state가 아니다
state가 두개 이상의 컴포넌트에 영향을 미친다면 어디에 위치시켜야 할까?
이러한 상황에서는 이들 컴포넌트의 부모 컴포넌트에 state를 위치시켜야 한다.
부모 컴포넌트의 state가 하위 컴포넌트에 의해 변할때가 있다.
sns에 새로운 글을 포스팅할 때, 포스팅 버튼의 동작, 즉 하위 컴포넌트의 클릭 이벤트는 부모의 상태를 변화시킨다. 이는 앞서 언급한 단방향 데이터 흐름과 반대되는 얘기다.
이를 해결하는 방법이 state 끌어올리기(lifting state up)다.
이는 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다. 마치 콜백 함수를 사용하는 것처럼 말이다. 정리하면, 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 따라서 단방향 데이터 흐름 원칙을 위배하지 않게 된다.
