🔍 React 데이터 흐름
👀 컴포넌트로 생각하기
React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다.
아래는 트위터 앱의 프로토타입이다.
위의 프로토타입으로부터 컴포넌트를 찾아내면 아래와 같다. 아래와 같이 컴포넌트를 만든 후, 페이지를 조립해나간다.
즉, 상향식(bottom-up)으로 앱을 만든다.
이러한 구현 방법은 테스트가 쉽고 확장성이 좋다. 따라서, 가장 먼저 프로토타입을 전달받았을 때, 컴포넌트 계층 구조로 나누는 것 부터 시작해야한다.
단일 책임 원칙에 따라 컴포넌트를 아래와 같이 나누었을 때,
- 단일 책임 원칙?
하나의 컴포넌트는 한 가지 일만 한다.
이를 트리 구조로 나타내면 아래와 같다.
👀 단방향 데이터 흐름
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(argument) 또는 속성(attribute)처럼 전달받을 수 있다.
이 때, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는 지 알 수 없다.
즉, 데이터를 전달하는 주체는 부모 컴포넌트가 되며, 데이터 흐름은 하향식(top-down) 으로, 위에서 아래로 흐르며 단방향 데이터 흐름(one-way data flow)이다.
👀 데이터 정의
애플리케이션에서 필요한 데이터가 무엇인지 먼저 정의한다.
Twittler를 예로 들면, 전체 트윗 목록 과 사용자가 작성 중인 새로운 트윗 내용 을 생각할 수 있다.
단, state가 많아질수록 애플리케이션이 복잡해지기 때문에 최소화하는 것이 좋다.
따라서, 아래 3가지 질문을 통해 어떤 데이터를 state로 두어야 하는 지 판단한다.
- 부모로 부터 props를 통해 전달되는 가
- 시간이 지나도 변하지 않는 가
- 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가?
위의 3가지 질문 중 하나라도 해당된다면 state가 아니다.
그렇다면 state는 어디에 위치시켜야 할까?
state가 특정 컴포넌트에서만 유의미하다면 해당 컴포넌트에만 두면 되지만, 하나의 state를 기반으로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트를 찾아 state를 배치해야한다.
즉, 2개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 배치해야 한다.
앞서 정의한 데이터를 데이터를 기반으로 위치를 정할 때, 전체 트윗 목록의 state는 어디에 위치해야 할까?
전체 트윗 목록은 Tweets 컴포넌트에서 개별 트윗을 출력하기 위해 필요하며, singleTweet 컴포넌트들은 모두 전체 트윗 목록에 의존한다.
Tweets는 singleTweet 컴포넌트들의 부모 컴포넌트이므로, 전체 트윗 목록 state는 Tweets에 위치한다.
이와 같이 React에서 데이터를 다룰 때, 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정해야한다.
Reference: 코드스테이츠
