Redux와 Recoil, Context API

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

 

* Redux 

:JavaScript 상태관리 라이브러리

리덕스는 하나의 상태를 관리하기 위해서  actions, reducers, store를 작성해야 함

중앙 집중식 상태 관리를 제공, 모든 상태는 단일한 스토어 안에 저장

 

- Redux의 3대 원칙

1. 애플리케이션의 모든 상태는 하나의 store 내의 단일 객체 트리로 저장된다.
2. 상태는 읽기 전용이다.
3. 변경을 위해 순수 함수를 사용한다.

 

<장점>

디버깅의 측면에서 유리하고, 상태값의 변경 사항을 Redux Devtools를 이용해 직관적으로 볼 수 있음

다양한 미들웨어를 사용할 수 있음

 

<단점>

보일러 플레이트 코드

(* 보일러 플레이트(boilerplate) :  최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드

매번 보일러플레이트 코드를 작성하는 것은 비효율적. 따라서, 제거하는게 좋음)

 

https://ko.legacy.reactjs.org/docs/context.html

Context – React

* Context API

: 전역 상태 관리를 위한 도구

React에 내장된 상태 관리 도구로 컴포넌트 트리 내에서 데이터를 전역적으로 공유하기 위한 API

 

<장점>

중간 계층 컴포넌트 없이 컴포넌트에 직접적으로 상태와 함수를 전달할 수 있음

 

<단점>

Redux처럼 다양한 미들웨어를 사용하여 로직을 외부로 분리하는 것이 쉽지 않음

 

 

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

Recoil 시작하기 | Recoil

* Recoil

: React 상태 관리를 위한 라이브러리

atoms과 selectors라는 두 가지 개념을 사용하여 상태를 관리

각 상태 조각을 atom으로 정의하며, 그것들을 조합하거나 변환하는 데에 selector를 사용

Recoil의 Loadable 객체는 state(비동기 처리 상태), contents(상태값) 2가지 프로퍼티를 반환
state는 hasValue, hasError, loading 3가지 상태를 반환

 

<장점>

상대적으로 직관적이면서 간단한 구조

개별적인 상태 조각인 atom에 대한 구독이 가능하므로 관련된 컴포넌트만 다시 렌더링 함

React의 동시성 모드를 지원하도록 설계되어, 여러 상태 변화를 동시에 처리하면서 사용자 경험을 개선할 수 있음

 

<단점>

안정된  Devtool이 아직 없음(snapshot이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태)