코드스테이츠 X 원티드 프리온보딩 FE 코스 study 자료를 바탕으로 정리하였습니다.

1. React에서 데이터 흐름

react 개발 방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다는 점!
먼저 컴포넌트를 만들고 이를 조립해 페이지를 만들어나가는 bottom-up(상향식) 개발 방식

bottom-up 방식의 장점

• 테스트가 용이
• 확장성 우수

개발 단계

1) 디자인을 보고 컴포넌트 계층 구조로 나누기

• 컴포넌트가 될 수 있는 항목 나누기
• 트리 구조로 나타내보기

2) 데이터 정의

• react의 데이터 흐름은 top-down(하향식) 방식

2-1) 필요한 데이터 정의

* 어떤 데이터를 state로 두어야 하는지 판별할 수 있는 질문

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

2-2) state 위치 정하기 : 공통 소유 컴포넌트를 찾아 위치시키기

3) 역방향 데이터 흐름 추가

• 부모의 상태를 변화시켜야 할 경우 => state 끌어올리기(Lifting state up)

• Lifting state up : 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해 해결. (콜백함수 사용방식과 유사)