React 데이터 흐름
- React개발 방식의 큰 특징은 페이지를 만들기 이전에 컴포넌트를 만들고 조립하는 즉, 상향식(bottom-up) 으로 앱을 만듬! 그래서 테스트가 쉽고 확장성이 좋은 장점이 있음.
- 개발자가 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 가장 먼저 해야 할 일은 컴포넌트 계층 구조로 나누는 것.
이제 컴포넌트 디자인을 해볼 것임!
-
일단 단일 책임 원칙(하나의 컴포넌트는 한 가지 일만 함)에 따른 구분으로 나누고
-
이것을 트리 구조로 나타내면 위와 같음
- React는 단방향 데이터 흐름(one-way data flow) 원칙이 매우 중요함. 부모 컴포넌트로 부터 데이터를 전달받음.
- state(상태)의 조건은 위와 같다.
✅ 하지만 상태위치를 다 정하고 나니 하위 컴포넌트(NewTweetForm)에서의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황이 왔음. 즉, 자식 컴포넌트가 부모 컴포넌트 상태를 바꾸는 상황
→ 이런 역방향 데이터 흐름을 해결하기 위해 "State 끌어올리기(Lifting state up)"를 사용할 수 있음.
State 끌어올리기 (Lifting State Up)
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행함
과제: StatesAirline Client - Part 1
추가하기
Frontend Developer