개발

[React] Redux / Recoil 상태관리 차이점과 특징

0hyeon의 2023. 9. 29. 16:06
반응형

 

 

상태 관리 라이브러리란 무엇?

상태 관리 라이브러리 는 애플리케이션의 상태를 모델링하고 , 여기에서 계산된 값을 도출하고, 변경 사항을 모니터링하는 편리한 방법을 제공합니다.

 

간단히 말해서, 프런트엔드 프레임워크에서 데이터를 관리하는 것은 데이터베이스만큼 중요합니다. 데이터를 잘 관리하는 상태 관리 시스템을 사용하면 여러 API 호출을 방지하는 데 도움이 됩니다 .

 

 

때문에 데이터가 분산되어있는경우, 상태관리툴을 이용해  데이터가 어디에 있는지 정확히 알 수 있어 개발 속도가 빨라집니다 .

전체적으로 데이터를 잘 관리하면 애플리케이션이 더욱 효율적으로 만들어집니다.

 

데이터를 저장하는 방법의 차이 / 특징 

  • redux는 하나의 store를 가짐
  • recoil은 여러 개의 atom을 가지는데 여러 개의 저장소를 가짐

 

- Redux

1.중앙 집중적인 상태 관리:

  • Redux는 중앙 집중적인 스토어를 사용하여 애플리케이션 전역 상태를 효율적으로 관리합니다. 이는 대규모 프로젝트에서 다양한 컴포넌트 간에 상태를 공유하고 동기화하는 데 도움이 됩니다.

2.예측 가능한 상태 흐름:

  • Redux의 불변 상태와 액션을 통한 상태 변경은 예측 가능한 상태 흐름을 제공합니다. 이는 프로젝트의 복잡성이 증가할 때도 애플리케이션의 동작을 이해하고 디버깅하기 쉽게 만듭니다.

 

=> 리덕스는 중앙집중적인 하나의 store를 통해 액션을 통하여 명시적으로 예측가능한 상태흐름과 Redux DevTools을 통해 디버깅 추적이 가능하다. 

 

 

-Recoil

1.React 애플리케이션에 특히 적합한 상태 관리 라이브러리

  • Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React 애플리케이션에 최적화되어 있습니다.

2.컴포넌트 기반의 상태 관리

  • Recoil은 상태를 원자(atom) 단위로 저장하며, 각 원자는 고유한 키(key)를 가지고 있습니다. 이를 통해 컴포넌트 간에 상태를 공유하거나 구독(subscribe)할 수 있습니다.

 

 

 Redux는 예측 가능하고 확장 가능한 상태 관리 솔루션을 제공하며, 이러한 특성은 대규모 프로젝트에서 특히 중요합니다. 그러나 Redux를 사용하기 위해서는 상당한 양의 코드와 개념을 이해해야 하므로, 작은 규모의 프로젝트나 간단한 앱에서는 다른 라이브러리나 상태 관리 방법을 고려할 수 있습니다.

Recoil은 React 애플리케이션에 특히 적합한 상태 관리 라이브러리로, 컴포넌트 기반의 상태 관리와 개발 생산성을 향상시키는 데 도움이 됩니다. 특히 React를 기반으로 하는 프로젝트에서 Recoil을 도입하면 상태 관리가 간단하고 효율적으로 이루어질 수 있습니다.

 

결론.

Redux는 보일러플레이트 존재(코드가길다),  어느 리액트에만 국한되지않고, 어느 프레임워크에나 사용가능하고, 중앙집중적 상태관리를 통해 액션을 명시적 사용하고, dev tool을 사용하여 디버깅이 용이

 

Recoil은 컴포넌트기반의 상태관리와 간편한 인터페이스 리액트에 적합한 라이브러리, 각 컴포넌트가 자체 상태를 가지고, 데이터 공유가 명시적으로 이루짐 ,dev tool을 사용가능

 

리덕스 대규모 애플리케이션에서 상태의 일관성을 유지하고 관리하기 용이하며, 상태 변경을 예측 가능

리코일은 주로 작은 규모의 애플리케이션 또는 간단한 컴포넌트간 상태공유에 적합

 

 

규모에 따라 Redux / Recoil 나누라고한다. 그규모란 그래서 도대체 뭔데? 

(chatGPT의 답변을 공유함)

  1. 컴포넌트 수:
    • 작은 규모의 애플리케이션은 주로 몇 개의 컴포넌트로 이루어져 있을 것이며, 각 컴포넌트가 비교적 간단한 상태를 관리할 수 있습니다. 반면에 대규모 애플리케이션은 많은 컴포넌트로 구성되며, 중앙 집중적인 상태 관리가 필요할 수 있습니다.
  2. 상태 복잡성:
    • 애플리케이션의 상태가 복잡하고 여러 컴포넌트 간에 공유되어야 하는 경우 Redux와 같은 중앙 집중적인 상태 관리가 더 유용할 수 있습니다. Recoil은 더 단순한 상태 관리에 적합합니다.
  3. 데이터 흐름:
    • 애플리케이션의 데이터 흐름을 고려하세요. 상태 업데이트와 데이터 공유가 컴포넌트 간에 복잡하게 얽혀있는 경우, 중앙 집중적인 상태 관리가 도움이 될 수 있습니다.
  4. 팀 규모:
    • 대규모 팀이 협업하는 프로젝트의 경우, 중앙 집중적인 상태 관리는 코드의 일관성을 유지하고 팀 간의 협업을 용이하게 만들 수 있습니다.
  5. 개발 경험과 선호도:
    • 개발자 팀의 경험과 선호도도 고려해야 합니다. 프로젝트 팀이 이미 Redux나 Recoil을 잘 알고 있거나 선호하는 경우, 해당 라이브러리를 선택하는 것이 합리적일 수 있습니다.

애플리케이션의 규모와 상황에 따라 Redux와 Recoil 중 하나를 선택하는 것이 아니라 두 가지를 혼합해서 사용하는 것도 가능하다고 한다.  예를 들어, 대규모 상태 관리에는 Redux를 사용하고, 작은 규모의 컴포넌트 간 상태 관리에는 Recoil을 사용하는 방법 중요한 것은 프로젝트의 요구 사항과 복잡성을 고려하여 가장 적합한 도구를 선택하는 것.

 

 

규모에 따라 중앙저장식으로 store에 저장할지, 컴포넌트기반으로 상태를 atom에 저장할지 고민을 한번 해보고 설계해보자.

반응형