React의 데이터 흐름

React 데이터 흐름

💡 앱의 디자인을 전달받으면 디자인을 컴포넌트 계층 구조로 나눈다

• 리액트는 페이지 단위가 아닌, 컴포넌트 단위로 구성되어있기 때문에 페이지를 구성하는 컴포넌트 단위를 나누어 주어야한다.
• 테스트가 쉽고 확장성이 좋은 상향식(bottom-up) 방식으로 앱을 만든다

💡 데이터를 전달하는 주체는 부모 컴포넌트이며, 데이터는 위에서 아래로 흐르는 하향식 흐름(top-down) 이다

• 컨포넌트는 바깥에서 props를 이용해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다
  • props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못하기 때문에 데이터의 위치를 파악 할 수 없다(타입만 확인 가능)
• 리액트는 단방향 데이터 흐름(one-way data flow) 이다

💡 사용자 입력에 따라 변할 수 있는 것은 상태(state)이다

• 상태가 많아질수록 애플리케이션이 복잡해지기 때문에 상태는 최소화하는 것이 가장 좋다
• 상태로 두어도 되는 데이터를 정하는 질문
  • 부모로부터 props를 통해 전달된다 ⇒ no state
  • 시간이 지나도 변하지 않는다 ⇒ no state
  • 컴포넌트 안의 다른 state나 props를 가지고 계산 가능하다 ⇒ no state
• 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트(부모 컴포넌트)에 상태를 위치해야 한다

💡 역방향 데이트 흐름

• 하위 컴포넌트에서의 이벤트가 부모의 상태를 바꾸는 경우, state 끌어올리기(Lifting states up)를 이용한다
  • 상태를 변경시키는 함수(handler)를 하위 컴포넌트에서 props로 전달하는 것
    ⇒ 콜백 함수를 사용하는 방법과 비슷