React의 상태 관리 라이브러리

📖props-drilling

데이터가 상위 컴포넌트에서 하위 컴포넌트로 전달되는 과정에서 중간 컴포넌트들을 거치면서 발생하는 문제로, 중간 컴포넌트가 많아지면 코드가 복잡해질 수 있다.

props-drilling 문제를 해결하기 위해 다음과 같은 라이브러리들을 사용할 수 있다.

 

✏️React Context API

react에서도 React Context API라는 자체적인 전역 상태관리 API를 제공해준다. 단, React Context API를 사용하면 리액트 앱 최상단에 Provider가 배치된다. Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. context를 구독하는 컴포넌트들을 Provider의 value prop이 바뀔 때마다 다시 렌더링된다. 따라서 상황에 따라 성능에 심각한 악영향을 미칠 수 있다.

 

 

✏️Redux

flux패턴을 사용하여, action이 발생하면 dispatcher에 의해 store에 변경된 사항이 저장되고, 그 상태에 의해 view가 변경되는, 데이터가 한 방향으로 흐르는 구조를 갖는다. 대체로 redux toolkit을 설치해서 같이 사용하고, redux saga를 이용해 비동기 처리를 한다.

*Redux 3대 원칙

1. 단일 데이터 소스

애플리케이션의 전체 상태는 전체 객체 트리 안에 저장된다. 이를 통해 애플리케이션의 상태를 한 곳에서 쉽게 관리할 수 있다.

2. 상태는 읽기 전용

상태는 직접 변경할 수 없으며, 대신 액션이라는 객체를 통해 상태 변경을 요청해야 한다. 

3. 변화는 순수 함수로 구현

상태 변경 로직은 순수함수인 리듀서(Reducer)에 의해 구현된다.

 

 

✏️Recoil

Recoil은 react 전용 상태관리 라이브러리로, 컴포넌트들이 구독할 수 있는 단위인 atom을 가진다. atom에 변화가 있으면 구독하는 모든 컴포넌트들이 재렌더링 된다.

action → dispatch → reducer → view 의 흐름을 가지는 redux와 달리

atom → selector → view 의 data-flow를 가진다.

또한 recoil은 비동기 기반으로 작성되어 동시성 모드도 지원한다.

 

 

 

npm trends를 확인해보니 가장 널리 사용되는 상태 관리 라이브러리는 redux임을 확인할 수 있다.(나는 recoil밖에 사용안해봤지만..)

 

 

https://velog.io/@wjdwl002/React-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%B9%84%EA%B5%90%EB%B6%84%EC%84%9D-Redux-Recoil-%ED%8E%B8