React스럽게 state 관리하기

React스럽게 state 관리하기

react는 state가 변경되면 해당 컴포넌트와 하위 자식들을 모두 리렌더링합니다. 따라서 state값이 많아진다는 것은 리렌더링될 요소가 많아진다는 곳과 동일합니다.

그러면 state를 어떻게 관리하는게 react스러운 것일까요?

state를 최소한으로 하는 것이 성능 향상의 첫 번째 관문이라고 할 수 있습니다.

react 공식문서에서는 최소한의 state를 파악하고 배치하는 발법을 아래와 같은 step으로 제시해줍니다.

State값인가?

1. 시간이 지나도 변하지 않는가? ⇒ Props
2. 부모로부터 전달되는가? ⇒ Props
3. 기존의 state나 props로 계산할 수 있는가? ⇒ Props
4. 위의 조건이 모두 아닌가? ⇒ State

이렇게 최소한의 state를 정했으면 이 값을 어떤 컴포넌트에서 관리할지 정해야 합니다.

어디에 state를 위치할 것인가?

react는 단방향 데이터 흐름을 가지고 있습니다. state

1. 해당 state를 기반으로 렌더링 하는 모든 컴포넌트 찾기
2. 가장 가까운 공통 상위 컴포넌트 찾기
3. 대부분의 경우 공통 상위 컴포넌트에 state를 둘 수 있다.
4. 혹은 공통 상위 컴포넌트보다 더 상위 또는 전역으로 관리할 수 있다.
5. 적절한 컴포넌트를 찾지 못했다면 새로운 컴포넌트를 만들어 공통 상위 컴포넌트의 상위에 추가한다

하지만 이러한 방법으로만 state를 관리한다면 props drilling이 생길 수 밖에 없습니다.

이를 해결하기 위해 많은 전역 상태관리 라이브러리들이 나왔습니다.

전역 상태관리는 크게 세가지 형태로 나눌 수 있습니다.

Flux 패턴

pub-sub 패턴을 이용한 단방향 데이터 흐름으로 구독 형태를 통해 상태관리합니다.

대표적인 라이브러리로는 redux와 zustand가 있습니다.

Proxy 패턴

컴포넌트에 사용되는 일부 상태를 자동 감지해서 업데이트 하는 방식입니다.

대표적인 라이브러리로는 Mobx, Valtio가 있습니다.

Atomic 패턴

리액트 트리 안에서 상태를 저장하고 관리하는 방식으로

대표적인 라이브러리는 Recoil, Jotai가 있습니다.

언제 전역상태관리를 써야하지?

최대한 state변경의 영향이 가는 부분을 최소화 하는 것입니다.[

이에 대해서 Kent C. Dodds가 제시하는 방법은 state를 colocation 시켜라 입니다.

Kent C. Dodds의 글을 요약하자면

1. state를 사용하는 컴포넌트에 위치시켜라
2. 2개이상 자식에서 사용된다면 가장 가까운 부모 컴포넌트에 위치시켜라
3. prop drilling이 발생한다면 compound components를 이용해서 state를 넘겨줘라
4. 그럼에도 해결 안될만큼 떨어져 있으면 그때 전역상태관리를 사용해라

이를 이해하기 쉽게 순서도로 정리해보면

이러한 순서도로 state를 정한 후

위의 그림과 같이 4가지 케이스로 state를 어떻게 관리할지 정할 수 있습니다.

---

참고

공식문서

참고자료

참고자료2

참고자료3