React 데이터 흐름

리액트는 컴포넌트 단위로 시작하기 때문에 컴포넌트부터 만드는 상향식(bottom-up)으로 앱을 만든다.
컴포넌트는 바깥에서 props를 이용해 데이터를 전달인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흘러가는 하향식(top-down)이다.
즉, React는 단방향 데이터 흐름(one-way data-flow) 특징이 있다.

데이터 정의

컴포넌트에서 데이터를 state를 사용하여 관리한다. 되도록이면 state를 최소화해서 사용하는 것이 좋다.

• 부모로부터 props를 통해 전달되나?
• 시간이 지나도 변하지 않나?
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능?

이 조건을 하나라도 걸리면 state로 만들 필요가 없다.

상태 위치 정하기

상태가 특정 컴포넌트에서만 쓰인다면, 특정 컴포넌트에서만 state를 만들어서 쓰면 된다.
하지만 하나의 state를 여러 컴포넌트가 사용한다면 공통 부모 컴포넌트에 state를 위치해야 한다.

State 끌어올리기 (Lifting State Up)

React는 단방향 데이터 흐름을 가지지만 하위 컴포넌트에 의해서 상위 컴포넌트의 state를 조작할 수 있다.
부모 컴포넌트에서 state를 변경하는 함수를 만들어서 하위 컴포넌트로 props를 통해서 전달해서 하위 컴포넌트에서 그 함수를 실행할 수 있게 하는 방법이 있다. 컴포넌트라는 함수에 콜백 함수를 전달하는 것과 비슷하게 생겼다. 이 방법이 Lifting State Up.