React 데이터 흐름

React 개발 방식 가장 큰 특징

컴포넌트 단위

페이지를 만들기 이전에 컴포넌트 먼저 만들고 조립

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

요기서 (Top)

|

|

욜로 (Down)

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.

즉 데이터를 전달하는 주체가 누구냐?! 부모 컴포넌트이다.

이는 데이터 흐름이 하향식을 의미한다.

또한 리액트는 단방향 데이터 흐름(One-way data flow)

컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

데이터 정의

어떤 데이터를 상태(state)로 둬야 할까?

(아닌경우)

• 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
• 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

상태 위치 정하기

두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통의 부모 컴포넌트에 상태를 위치

역방향 데이터 흐름 추가?

하위 컴포넌트에서의 클릭 이벤트가. 부모의 상태를 바꿔야만 하는 상황일 때 어떻게 해결 할까?

→"State 끌어올리기(Lifting state up)"

상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결