React 데이터 흐름

컴포넌트로 생각합시다

리액트의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징입니다.
페이지를 만들기 이전에, 앱의 프로토타입을 전달받았다면 컴포넌트를 찾고, 그 컴포넌트를 먼저 만들고 다시 페이지를 조립해나갑니다.
즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.
그래서 여러분이 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다.

데이터는 위에서 아래로 흐릅니다

하나의 컴포넌트는 한가지 일만 합니다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다.
즉, 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이는 데이터의 흐름이 하향식(top-down)임을 의미합니다.

정리하자면,
컴포넌트를 만들고 그것을 모아서 앱을 만들기 때문에 컴포넌트를 먼저 만든 후 페이지를 조립해 나가기 때문에 상향식(bottom-up)으로 앱을 만들고 데이터의 흐름은 하향식(top-down)이라는 것입니다.

단방향 데이터 흐름(one-way data flow)이라는 키워드가 리액트를 대표하는 설명 중 하나입니다. 또한 컴포넌트는 Props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못합니다.

데이터 정의

모든 데이터를 상태로 둘 필요는 없습니다. 사실 상태는 최소화 하는 것이 가장 좋습니다. 상태가 많아질수록 애플리케이션은 복잡해집니다. 어떤 데이터를 상태로 두어야 하는지 여부는 다음 세가지 질문을 통해 판단해보세요.

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

상태 위치 정하기

상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 되니까 크게 어렵지 않지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야 합니다.
즉, 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야합니다.
이 이유는 단방향 데이터 흐름을 유지하고, 같은 상태를 유지할 수 있는 바람직한 방법이기 때문입니다.

이처럼 리액트에서 데이터를 다룰 때는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정해야 합니다.

출처 : 코드스테이츠