[FE / REACT] Redux vs Recoil

Redux

1. Redux

Javascript 상태 관리 라이브러리

1. Action : 애플리케이션에서 상태 변경을 발생시키는 객체. 일반적으로 Javascript객체이며, **type**필드와 payload 필드를 가짐. type 은 액션의 종류를 식별하는 문자열
2. Reducers : 이전 상태(state)와 액션(action)을 인자로 받아 새로운 상태를 반환하는 함수. 리듀서는 불변셩을 유지해야 하므로 이전 상태를 직접 수정하지 않고 복사본을 만들어 상태를 업데이트 함
3. Store : 애플리케이션의 상태를 보유하고 액션을 디스패치하여 상태 변경을 트리거하는 역할. 단일 스토어로 애플리케이션 전체의 상태를 관리하며, 스토어를 생성하고 초기 상태를 설정하는 데 사용
4. Dispatch : 액션을 스토어에 보내 상태 변경을 트리거 하는 과정. 액션을 디스패치하면 리듀서가 호출되어 새로운 상태가 생성
5. Subscribe : 스토어에서 발생하는 상태 변경을 감지하고, UI를 업데이트 하는 역할

2. 특징

• 하나의 어플리케이션은 하나의 스토어만 가진다
• 상태는 읽기 전용이다
• 리듀서는 순수 함수여야 한다

3. 장점과 단점

장점

• state를 쉽게 관리할 수 있다
• 상태의 지속성 :브라우저의 새로고침과 같은 상태 유지 제공
• 컴포넌트 분리 : 상태를 컴포넌트 밖에서 관리하므로 컴포넌트 간의 상태 공유와 재사용 용이

단점

• 방대한 코드량
• 복잡성
• 오버헤드 발생 가능

---

Recoil

 

1. Recoil

contextAPI 기반으로 구현된 페이스북에서 만든 상태 관리 라이브러리(함수형 컴포넌트에서만 사용 가능)

1. Atom : 개별적인 상태 단위
2. Selector : Atom이나 다른 selector 들을 입력으로 받는 순수 함수. Atom에서 파생된 데이터를 계산하거나 변환할 때 사용

2. Redux vs Recoil

Redux	Recoil
작은 상태 관리에도 많은 코드가 필요	직관적이고 간단한 로직, 코드 양이 적음
이미 검증된 Redux Devtools을 통해 디버깅에 용이	안정적인 Devtool이 아직 없음