SEB_FE_ 블로깅 챌린지 _ 34일차 ( React 데이터 흐름)

< React 데이터 흐름 > - 컴포넌트 내부의 데이터 흐름

 

* React 개발의 시작

컴포넌트 찾기 -> 계층적 구조로 나누기 -> 컴포넌트는 바깥에서 props를 이용해 데이터를 속성처럼 전달받음.

 특징 : 데이터를 전달하는 주체는 부모 컴포넌트임.  데이터의 흐름이 단방향 이고 하향식이다.

 

 

1. 데이터 정의 -> 변하는 값과 변하지 않는 값.   state와 props 대략 정하기.

   ( 부모로부터 props를 통해 전달이 되나? 시간이 지나도 변하지 않는가?

     컴포넌트 안의 다른 state나 prop를 갖고 계산이 가능한가?  -> NOT state!! )

 

 

2. state의 위치 정하기 : 특정 컴포넌트에서만 유의미 하면 그 컴포넌트에 두고,

                        여러 컴포넌트에 유의미하면 공통 소유 컴포넌트에 둔다. ( ex) 여러 자식들의 부모 컴포넌트 )

 react는 단방향이지만, 하위 컴포넌트의 이벤트가 부모의 상태를 바꿔야 한다면 props로 전달해서 해결 할 수 있음.

 

 

3. 상태 끌어올리기

 : 하위 컴포넌트에 의해 상위 컴포넌트의 상태가 바뀌는 것이 단방향 데이터 흐름에 부적합 함.

-> 상위 컴포넌트에서 상태를 변경하는 함수를 하위컴포넌트로 전달하도록 함. (상태 끌어올리기)