[React] 상태관리 라이브러리, Redux 와 다른 상태 관리 도구

상태관리 라이브러리, Redux

---

상태관리 라이브러리

---

- 상태 관리 라이브러리는 프론트 엔드 애플리케이션에서 상태를 관리하기 위해 사용되는 도구야. 

 

Redux

---

- Redux는 JavaScript 애플리케이션에서 상태를 관리하기 위한 도구야.
- 단방향 데이터 흐름을 기반으로 해.
- 애플리케이션의 상태는 하나의 개체인 Store에 저장 돼.
- 상태를 변경하기 위해 액션(Action)을 발생시켜야 해.
- 액션은 순수 함수인 Reducer에 의해 처리되서 새로운 상태를 반환해.

Redux에서 사용되는 주요 개념들 4가지가 있어.

1. Store
2. Action
3. Reducer
4. Dispatch

 

- Store:

애플리케이션의 상태를 저장하는 객체야. Redux의 모든 상태는 단일 객체 트리에 저장돼.

- Action:

상태 변경을 나타내는 객체야. Redux에서 상태를 변경하려면 반드시 액션을 발생시켜야 해.

- Reducer:

액션에 응답하여 새로운 상태를 반환하는 함수야. Reducer는 애플리케이션의 상태를 변경하는 로직을 포함해.

- Dispatch:

액션을 발생시키는 함수야. 액션을 발생시키면, Redux는 해당 액션에 대한 Reducer를 실행해서 상태를 변경해.

 

Redux와 다른 상태 관리 도구들의 차이

- Redux는 상태를 중앙 집중적으로 관리하기 때문에, 애플리케이션의 복잡성이 증가할수록
Redux의 이점이 더욱 커져.
- Redux는 React와 함께 사용하기 쉽기 때문에, 대부분의 React 애플리케이션에서 사용돼.

- 다른 상태 관리 도구들은 Redux보다 작은 규모의 애플리케이션에선 더욱 적합할 수 있어.
- 다른 상태 관리 도구들은 보통 React와 결합하여 사용하지 않고,
  다른 프레임워크나 라이브러리와 함께 사용될 수 있어.
- Redux보다 코드량이 적고 사용이 간편해.
하지만 간편한 만큼, 디버깅이 어렵거나 불필요한 업데이트가 발생할 가능성이 높을 수 있어.

- 그래서 선택할 도구는 프로젝트의 규모와 요구사항에 따라 결정하면 돼.

장점

- 코드의 일관성과 유지 보수성이 뛰어나.
- 상태 변화를 추적하기 쉽기 때문에 디버깅이 용이해.
- 단순하면서도 예측 가능한 상태 관리를 제공해.
- 상태를 중앙 집중적으로 관리해서 애플리케이션의 복잡성이 증가할수록
Redux의 이점이 더욱 커져.
- 복잡한 애플리케이션에서 유용해서 큰 규모의 팀에서 사용해.

단점

- 초기 설정과 구성이 다소 복잡할 수 있어.
- 추가적인 코드 작성이 필요하기 때문에, 코드량이 증가할 수 있어.

 

1. React Context API

- React에서 제공하는 상태 관리 방법이야.
- React 애플리케이션의 상태 관리를 위해 사용돼.
- Context API를 사용해서 상태를 전역적으로 공유할 수 있어.
- Action과 Reducer를 사용해서 상태를 업데이트해.
- React Context API는 단순한 상태 공유를 위한 API야.

 

Redux 와 React Context API의 차이점

- Redux는 별도의 스토어를 사용하여 전역 상태를 관리하는 반면,
 Context API는 React 컴포넌트 트리 안에서 상태를 전달하는 데 사용돼.

- Redux는 복잡한 애플리케이션에서 사용하기 좋고,
Context API는 상태가 단순하거나 중요하지 않은 경우에 사용하기 좋아.

- Redux는 미들웨어를 통해 상태 변화를 추적해,
 Context API는 미들웨어를 제공하지 않아.

- Redux는 불변성을 유지하기 때문에 상태 변화를 추적하기 쉬워,
Context API는 불변성을 유지하기 어려워.
(하지만 Redux보다 더 쉽고 간단한 방법으로 상태를 전달할 수 있어.)

2. MobX

- MobX는 객체지향 프로그래밍에 적합한 상태 관리 라이브러리야.
- Reactive Programming 기술을 기반으로 해.
- 상태를 감시하는 Observer와 상태를 변경하는 Action, 상태를 저장하는 Store로 구성 돼.
- Redux와 달리 액션-리듀서 구조가 아닌 observable 상태를 사용해서 상태 변화를 추적해.
- React와 사용하기 매우 쉬워.

- 장점 :

상태가 바뀔 때마다 컴포넌트가 다시 렌더링되서, 리액트와 함께 사용할 때 편리해.
코드량이 적고 구성이 간단해.

- 단점

- Observable 상태의 동작이 예측하기 어려울 수 있고
- 상태의 구성이 매우 복잡해질 수 있어.
- 사용이 간편해서 불필요한 업데이트가 발생할 가능성이 높아.

Redux 와 MobX의 차이점

- Redux는 액션과 리듀서를 사용하여 상태를 변경하고
MobX는 상태를 관찰 가능한 객체로 만들어서 자동으로 상태 변화를 추적해.

- Redux는 상태를 불변 객체로 관리하고,
MobX는 객체를 직접 변경해.

- MobX는 코드량이 적고, React, Angular, Vue 등의 다양한 프레임워크와 함께 사용할 수 있어.
Redux는 상태 변화를 추적하고 디버깅하기 쉬워.

 

3. Recoil

- React에서 사용하기 쉬운 상태 관리 라이브러리야.
- Atom, Selector, 액션과 같은 개념을 사용해서 상태를 관리해.
- 

 

-참고자료-

https://recoiljs.org/ko/docs/introduction/getting-started/

https://medium.com/lunit/%EB%8B%B9%EC%8B%A0%EC%97%90%EA%B2%8C-redux%EB%8A%94-%ED%95%84%EC%9A%94-%EC%97%86%EC%9D%84%EC%A7%80%EB%8F%84-%EB%AA%A8%EB%A6%85%EB%8B%88%EB%8B%A4-b88dcd175754

https://velog.io/@kskim625/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Redux-Mobx-Recoil

https://mmsesang.tistory.com/entry/2021%EB%85%84-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-%EC%A0%84%EC%9F%81-Hooks-Redux-Recoil 

https://react-redux.js.org/introduction/why-use-react-redux - 리액트에서 리덕스 사용하기.

https://ko.redux.js.org/introduction/getting-started/ - 공식문서

https://mingule.tistory.com/74

https://hanamon.kr/%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EB%8F%84%EA%B5%AC-%ED%95%84%EC%9A%94%EC%84%B1/

https://mmsesang.tistory.com/entry/2021%EB%85%84-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-%EC%A0%84%EC%9F%81-Hooks-Redux-Recoil