전역 상태 관리 도구 Redux

• React에서 State는 component 안에서 관리되는 것이다.
• 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
• 자식 컴포넌트들 간의 데이터를 주고받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고받는다.
• 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
• 상태를 관리하는 상위 컴포넌트에서 계속 내려받아야 한다. => Props drilling 이슈

상태 관리 도구 종류

• React Context
• Redux
• MobX

 

Redux의 기본 개념

1. 스토어는 하나의 공간이다

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. 상태는 읽기 전용이다

• 리액트에서는 setState 메서드를 활용해야만 상태 변경이 가능하다.
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. 순수함수

• 변경은 순수함수로만 가능하다.
• 리듀서와 연관되는 개념이다.
• Store(스토어) – Action(액션) – Reducer(리듀서)

 Reducer (리듀서)

• Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니다.
• Action(액션)을 Reducer(리듀서)에 전달해야 한다.
• Reducer(리듀서)가 주문을 보고 Store(스토어)의 상태를 업데이트하는 것이다.
• Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메서드를 사용해야 한다.
• Action(액션) 객체가 dispatch() 메서드에 전달된다.
• dispatch(액션)를 통해 Reducer를 호출한다.
• Reducer는 새로운 Store를 생성한다.

 

store

리덕스에서 가장 중요한 객체(인스턴스)입니다. 이 안에 현재 상태를 가지고 있고, 액션값을 받은 디스패치함수가 리듀서로 전달한 상태값을 여기에 저장합니다. 구독(subscribe)으로 상태가 업데이트될 때마다 다시 실행하게 해 줍니다.

스토어는 "단 1개의 상태값"만을 가질 수 있습니다. (객체 안에 여러 가지 프로퍼티를 가짐)

 

reducer

리듀서는 액션의 type에 따라 변화를 일으키는 함수입니다. 즉 스토어에 상태값이 들어가기 전 액션값에서 전탈된 'type'의 종류에 따라 어떤 상태값으로 스토어에 리턴될지 정하는 함수입니다. 스토어를 만드는 함수인 createStore()의 첫 번째 파라미터에 들어가며 리듀서의 첫번째 파라미터엔 초기 상태값과 두 번째 파라미터엔 액션값을 넣어줍니다.

dispatch

스토어의 메서드이고 상태값 업데이트를 실행하는 함수입니다. 디스패치가 실행되면 파라미터로 전달받은 액션값이 리듀서의 두번째 파라미터 객체로 전달됩니다. 그러면 리듀서 안에 있는 코드들로 인하여 스토어에 상태값이 저장됩니다.

action

디스패치의 파라미터로 전달될 데이터입니다. 액션은 상태값이 어떻게 변할지 행동을 적어놓은 객체입니다. 나중에 리듀서가 액션을 전달받으면 액션의 값에 따라서 다른 작업을 합니다. 그리고 액션에는 규칙이 몇 가지 있는데 액션은 무조건 객체여야 합니다. 그리고 액션 객체에는 type 프로퍼티를 무조건 가지고 있어야 합니다.

subscribe

스토어의 데이터가 변할 때마다 실행되는 메서드입니다.

 

 

Mobx

Mobx는 Redux와 비슷한 상태 관리 라이브러리이지만 Redux에 비해 간결하고 깔끔한 구조를 가지고 있다는 평가를 받는다. Mobx의 가장 큰 특징은 모든 상태 변화가 일어나는 부분을 자동으로 추적해 주는 것이다.

 

Redux vs MobX

• Redux는 함수형 프로그래밍에 영향을 받은 라이브러리다. MobX는 객체 지향 프로그램 OOP를 권장하는 라이브러이다. OOP 익숙한 많은 개발자들이 쉽게 접근하고 사용할 수 있다.
• Redux는 구조상 Store와 Component의 연결을 위해 번잡한 코드들을 계속 작성해주어야 한다. MobX는 이러한 코드를 데코레이터를 사용하여 깔끔하게 작성할 수 있다
• Redux는 Store의 상태를 Immutable 하게 변경하기 때문에 항상 새로운 상태를 반환해야한다(Read Only). MobX는 Mutable하게 변경이 가능하다(Read and Write)
  • Redux의 이러한 특성 때문에 상태를 Immutable하게 변경하기 위해 추가작업이 필요한데 Destructuring을 활용해 새로운 상태를 반환하거나, Immutable.js 라이브러리를 이용해서 Immutable 한 데이터 구조를 활용하게 된다. (라이브러리 학습이 또 필요)
• 비동기 처리를 위해서 Redux는 별도의 라이브러리를 추가적으로 사용해야 한다.(redux-thunk, redux-saga). MobX는 async action을 지원해서 async/await 문법을 사용해 깔끔하게 처리가 가능하다.
• Redux와 다르게 Mobx는 store에 제한이 없다.
• observable을 기본적으로 사용하고, 절대적으로 필요한 경우에만 state를 변경한다.
• JAVA의 annotation과 유사한 decorator를 제공한다.
• 캡슐화가 가능하다. Mobx Config 설정을 통해 State를 오직 메서드를 통해서만 변경할 수 있도록 Private 하게 관리 가능하다.

Recoil

Recoil은 context API 기반으로 구현된 함수형 컴포넌트에서만 사용 가능한 페이스북에서 만든 라이브러리이다. 호환성이나 단순함을 위해선 React에 내장된 상태 관리 기능을 사용하는 게 가장 바람직하다고 할 수 있다. 예를 들어 Hooks나 Context API를 사용하여 상태 관리를 할 수 있는데, 그런 경우에는 여러 가지 한계가 존재한다. 이러한 상황에서 Recoil은 React 스러움을 유지하며 개선하는 방식의 라이브러리이다. Recoil은 방향 그래프를 정의하고 리액트 트리에 붙이는데, 이 그래프의 뿌리(atom)로부터 순수 함수 (selector)를 거쳐 컴포넌트로 흐른다.

 

Recoil 특징

• 비동기 처리를 기반으로 작성되어 동시성 모드를 제공, Redux와 같이 다른 비동기 처리 라이브러리에 의존할 필요가 없다.
• atom -> selector를 거쳐 컴포넌트로 전달되는 하나의 data-flow를 가지고 있어, 복잡하지 않은 상태 구조를 가지고 있다.
• atom과 selector만 알고도 어느 정도 구현이 가능하기 때문에 러닝커브가 비교적 낮다고 할 수 있다.
• store와 같은 외부 요인이 아닌 React 내부의 상태를 활용하고 context API를 통해 구현되어 있기 때문에 더 리액트에 가까운 라이브러리라고 할 수 있다.

출처:https://velog.io/@404/%EB%A6%AC%EB%8D%95%EC%8A%A4-0.-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80#subscribe

https://hanamon.kr/redux%eb%9e%80-%eb%a6%ac%eb%8d%95%ec%8a%a4-%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/

https://jinhyukoo.github.io/web/2021/02/03/Mobx%ED%95%99%EC%8A%B5%EC%A0%95%EB%A6%AC.html

 

 

참고자료:https://tech.osci.kr/2022/06/16/recoil-state-management-of-react/