Redux란? (+Context API, Recoil과의 차이점)

Redux의 정의

• Redux는 JavaScript 애플리케이션의 상태(state)를 관리하는 라이브러리
• 이전 상태와 액션을 참조하여 새로운 상태를 생성하는 함수인 리듀서를 이용하여 작동

Redux가 필요한 이유

• 복잡한 JavaScript 애플리케이션에서 상태(state)를 관리하기는 쉽지 않음
• Redux는 중앙 집중식 상태 관리를 통해 코드를 보다 예측 가능하고 유지보수하기 쉽게 만들어 줌
• 즉 Redux는 상태 변화를 예측 가능하고 일관된 방법으로 관리하게 해주며, 큰 규모의 어플리케이션에서 상태를 효과적으로 관리하는데 좋음

---

Redux의 기본 폴더구조 및 각 폴더와 파일의 역할

 

Redux의 기본 폴더구조

src/
  actions/
    index.js
  reducers/
    index.js
  store.js

 

Redux 폴더구조의 설명

• actions/: 액션을 정의하는 디렉토리
• reducers/: 리듀서를 정의하는 디렉토리
• store.js: Redux 스토어를 생성하는 파일

 

각 폴더 및 파일의 역할에 대한 설명

• actions/index.js: Redux 액션을 정의
• reducers/index.js: Redux 리듀서를 정의
• store.js: Redux 스토어를 생성

 

기본적인 스토어 생성 과정

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
	//각각의 리듀서 추가하는 곳
});

const store = createStore(rootReducer);

export default store;

• createStore : Redux 스토어를 생성
• combineReducers : Redux 리듀서를 결합하여 하나의 리듀서로 만듦
• 즉, 이 코드를 통해 Redux를 사용해 여러 개의 상태를 관리하는 작은 리듀서들을 합쳐 하나의 스토어를 생성하고, 그 스토어를 내보내는 과정을 거침

 

리듀서 생성하기

Redux는 상점

상태(state)는 상점에 있는 물건

액션(action)은 물건을 구매하는 행위

리듀서(reducer)는 물건을 구매한 후의 상점의 상태를 바꾸는 행위로 비유할 수 있음

 

 

리듀서란?

• 어플리케이션에서 특정 부분의 상태를 관리하는 함수
• 리듀서는 상태와 입력을 액션으로 받고, 새로운 상태를 반환
  • 액션 : 어떤 변화를 일으킬지 설명하는 객체

예를 들어, 리듀서를 사용해 ‘과일’ 상태를 관리한다고 하면 다음과 같은 형태의 리듀서를 만들 수 있음

function fruitReducer(state = [], action) {
  switch (action.type) {
    case "ADD_FRUIT":
      return [...state, action.fruit];
    default:
      return state;
  }
}

• 이 리듀서는 초기 상태로 빈 배열을 가짐
• 액션 타입이 ‘ADD_FRUIT’일 경우 새로운 과일을 상태에 추가

 

리듀서를 스토어에 합치기

• combineReducers 함수 사용
  • 여러 개의 리듀서를 입력받아 하나의 리듀서 함수를 반환 (rootReducer)
  • 이 함수는 각 리듀서를 호출해 전체 상태를 생성

const rootReducer = combineReducers({
  fruit: fruitReducer,
});

• createStore 함수를 사용해 스토어 생성
  • 리듀서를 인자로 받아 스토어를 생성
  • 이 스토어는 어플리케이션의 상태를 저장하며, 상태를 업데이트하거나 조회하는 API를 제공

const store = createStore(rootReducer);
export default store;

 

---

Redux, Context API, Recoil의 차이점

각 기술에 대한 기본 설명

Redux, Context API, Recoil은 모두 React 애플리케이션에서 상태(state)를 관리하는 라이브러리

상위 컴포넌트에서 하위 컴포넌트로 상태를 전달하는 'props drilling' 문제를 해결할 수 있음

 

 

각 기술의 차이점

 

Redux

• 상태 관리를 위한 복잡하지만 강력한 도구
• 어플리케이션의 상태를 중앙 집중화하여 관리하며, 액션과 리듀서를 통해 상태의 변화를 제어
• 이렇게 규칙을 정의함으로써 상태 변화를 예측 가능하게 만듦
• 크고 복잡한 어플리케이션에서 상태를 관리하는데 특히 유용
• 모든 규칙을 따라야 한다는 점에서 어려울 수 있음

 

 

Context API (useContext)

• React의 내장 API로, 컴포넌트 간 상태를 공유하는 간단한 방법
• 주의할 점
  • useContext를 사용할 때, Provider에서 제공한 상태가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링됨
  • 즉 상태가 광범위하게 공유될수록 해당 상태에 의존하는 컴포넌트들이 많아지게 됨
  • 이는 상태 변경 시 발생하는 리렌더링이 컴포넌트 트리 전체에 영향
  • 따라서 Context API를 사용할 때는 공유되어야 하는 상태만 전역으로 관리하는 것이 중요
• 복잡한 상태 로직이나 많은 양의 상태를 관리하기에는 한계가 있을 수 있음
• 상대적으로 작은 규모의 애플리케이션에서 사용

• 출처 : https://www.copycat.dev/blog/react-context/

 

 

Recoil

• Facebook에서 만든 React 상태 관리 라이브러리
• Atom과 Selector라는 두 가지 주요 개념을 중심으로 상태를 관리
• 각각의 Atom과 Selector를 조합하여 복잡한 상태 로직을 구현하는 데 유용
• 복잡한 상태를 갖는 대규모 애플리케이션에서 유용
• 아직 새롭게 등장한 라이브러리이기 때문에 그 안정성과 생태계가 충분히 발달했는지는 시간이 좀 더 필요

 

• 요약
  • Redux, Context API, Recoil은 상태 관리를 위한 다양한 접근 방식을 제공
  • 어떤 것을 선택할지는 사용하려는 어플리케이션의 복잡성, 개발 팀의 선호도, 그리고 개인적인 경험 등 여러 요소에 따라 달라질 수 있음

Your Guide To The React Context API - CopyCat Blog

---

 

재미있는 비유

+) Redux를 대규모 슈퍼마켓, Context API를 동네 작은 가게, Recoil을 신식 편의점에 비유하는 비유가 있음.

Redux 슈퍼마켓에는 다루는 물건(=상태)에 대한 정리가 잘 되어있어 물건을 어디에 두고, 어떻게 새 물건을 추가하고, 어떻게 물건을 바꿀 것인지 규칙이 모두 있음. 이 규칙 덕분에 많은 사람들이 물건을 함께 관리해도 잘 돌아감. 하지만 이런 규칙을 따라야 하기 때문에 처음에는 조금 복잡할 수 있음.

Context API 작은 가게는 물건을 어디서든지 공유할 수 있음. 이 가게를 이용하면 가까운 친구들과 물건을 쉽게 공유할 수 있음. 하지만 가게 안의 물건이 너무 많아지거나 물건을 바꾸는 규칙이 많아지면 가게를 정리하는 게 조금 힘들어 질 수 있음.

Recoil 신식 편의점은 각각의 물건(=상태)을 잘 관리할 수 있음. 편의점의 각 섹션(atom)에서 물건을 찾아보고 필요에 따라 물건을 바꿀 수 있음. 또한 서로 다른 섹션들(atom)이 어떻게 연결되어 있는지 볼 수 있게 해주는 도구(selector)도 있음. 이 도구를 사용해 한 섹션의 물건이 바뀌면 다른 섹션의 물건도 함께 바뀌는 등의 작업을 할 수 있음. 그러나 recoil은 아직 새로운 편의점이라 모든 물건을 잘 관리할 수 있는지는 시간이 좀 더 필요함.