[React]데이터 흐름

1. React 데이터 흐름

React는 단방향 데이터 흐름(One-way data flow)을 따른다.

📝 컴포넌트 구조: 상향식(bottom-up)

• React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다.
• 기획자나 PM, UX 디자이너로부터 앱의 디자인을 전달받으면, 먼저 컴포넌트 계층 구조로 나누어 컴포넌트를 만들고 조립한다.
• 컴포넌트 구조는 상향식 앱으로 만든다.

📝 데이터 흐름: 하향식(top-down)

👉 데이터는 위에서 아래로 흐른다.

props (변하지 않는 값)

• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attrivutes)처럼 전달받을 수 있다.
• 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알지 못하며, 데이터를 전달하는 주체가 부모 컴포넌트가 된다.
  -> 이를 통해 React의 데이터 흐름이 하향식이라는 것을 알 수 있다.
  

state (변하는 값)

• 상태는 최소화하는 것이 좋다. 상태가 많아질수록 애플리케이션은 복잡해지기 때문이다.

Q. 아래 3가지 질문을 통해 데이터를 상태로 둘 필요가 있는지 판단

❓ 부모로부터 props를 통해 전달되는가?
👉 그렇다면 state가 아님

❓ 시간이 지나도 변하지 않는가?
👉 그렇다면 state가 아님

❓ 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가?
👉 그렇다면 state가 아님

• 상태의 위치는 상태가 특정한 컴포넌트에서만 유의미하면 해당 컴포넌트에 위치시킨다.
  만약 두 개의 서로 다른 컴포넌트가 특정 상태에 의존적일 경우, 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치시킨다.

State 끌어올리기 (Lifting State Up)

React에서는 기본적으로 하향식 데이터 흐름을 가지고 있다.
상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리한다.
그런데 동일한 데이터를 여러 컴포넌트에서 사용하고, 변경됐을 때 바로 반영되어야 한다면, 공통된 상위 컴포넌트에서 state를 처리하고, 하위 컴포넌트에서는 상위로 전달하는 방법을 사용해야 한다.
React에서는 이 방법을 state 끌어올리기라고 한다.


즉, 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 방식이다.