Redux 는 무엇일까

김영은·2024년 6월 20일

Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.

핵심 개념

스토어(Store) : 애플리케이션의 상태가 저장되는 곳으로 상태를 읽거나 업데이트하는 방법을 제공(State보관소)

액션(Action) : 상태에 어떤 변화가 필요할 때 발생하는 이벤트입니다. 자바스크립트 객체로, type 필드를 가짐.

리듀서(Reducer) : 액션이 발생했을 때 상태 변경 함수
이전 상태(state)와 액션(action)을 인자로 받아 새로운 상태를 반환

디스패치(Dispatch) : 액션을 스토어에 전달하는 함수입니다. store.dispatch(action)과 같은 형태로 사용

구독(Subscribe) : 상태가 변경될 때마다 특정 함수를 실행하도록 하는 메서드입니다. store.subscribe(listener) 형태로 사용

Redux VS Context API

Redux

목적: 복잡한 애플리케이션의 상태를 중앙에서 효율적으로 관리.
사용 사례: 대규모 애플리케이션, 복잡한 상태 관리, 여러 컴포넌트 간의 상태 공유가 필요할 때.
특징: 액션, 리듀서, 스토어를 통해 상태 관리; 미들웨어를 통해 로깅, 비동기 처리 등을 쉽게 구현.

Context API

목적: 주로 React 컴포넌트 트리에서 깊이 중첩된 컴포넌트에 간단한 데이터를 전달.
사용 사례: 테마 설정, 사용자 인증 정보 등 비교적 간단한 상태를 공유할 때.
특징: 전역 상태를 제공하기 위해 React의 기본 기능을 활용; 주로 간단한 상태 관리 용도로 사용.

Redux의 사용법 예제

기본 사용법

1. Redux 설치하기

npm install redux

2. 스토어 생성(./src/store.js)
스토어를 생성하려면 createStore 함수를 사용하며 이 함수는 리듀서를 인자로 받음.

import { createStore } from 'redux';
 // 초기 상태
 const initialState = {
   count: 0
 };
 // 리듀서 함수
 function counterReducer(state = initialState, action) {
   switch (action.type) {
     case 'INCREMENT':
       return { count: state.count + 1 };
     case 'DECREMENT':
       return { count: state.count - 1 };
     default:
       return state;
   }
 }
 // 스토어 생성
 const store = createStore(counterReducer);

3. 액션 정의
액션은 상태 변경의 유일한 방법으로 액션 객체는 일반적으로 type 프로퍼티를 가지고 있음.

	const incrementAction = { type: 'INCREMENT' };
	const decrementAction = { type: 'DECREMENT' };

4. 디스패치
디스패치를 통해 액션을 스토어에 보냄.

 	store.dispatch(incrementAction);
 	store.dispatch(decrementAction);

5. 구독
상태가 변경될 때마다 특정 코드를 실행

 	store.subscribe(() => {
     	console.log(store.getState());  
   	});

6. 상태 조회
현재 상태를 조회하려면 store.getState()를 사용

	import { createStore } from 'redux';
 	 // 초기 상태
 	const initialState = {
   	count: 0
 	};
  	// 리듀서 함수
  	function counterReducer(state = initialState, action) {
    	switch (action.type) {
      	case 'INCREMENT':
        	return { count: state.count + 1 };
      	case 'DECREMENT':
        	return { count: state.count - 1 };
      	default:
        	return state;
  	 }
 	}
	// 스토어 생성
  	const store = createStore(counterReducer);
 	// 구독
  	store.subscribe(() => {
    	console.log(store.getState());
  	});
  	// 액션 정의
  	const incrementAction = { type: 'INCREMENT' };
  	const decrementAction = { type: 'DECREMENT' };
  	// 디스패치
  	store.dispatch(incrementAction); // { count: 1 }
  	store.dispatch(decrementAction); // { count: 0 }

Redux를 사용하는 이유

그렇다면 어렵다고 느낄 수 있는 Redux를 사용하는 이유는 무엇일까.

중앙집권..

데이터를 중앙집권화 덕분에 편리하게 데이터를 어느 컴포넌트에서든지 쉽게 가져다 쓸 수 있다.

미들웨어

: Redux-saga, Redux-thunk 와 같은 미들웨어를 통해 비동기 작업에 대한 좀 더 디테일하고, 편한 컨트롤을 할 수 있어 좀 더 편하고, 명확한 개발을 할 수 있게 해준다.

서버사이드 렌더링

: API 요청 결과를 사용하여 서버사이드 렌더링을 할 때 유용하다. 리덕스가 없어도 충분히 구현 할 수는 있긴 하지만 레퍼런스도 부족하고 번거로운 편, Recoil, Zustand 등의 state 관리 라이브러리는 아직 SSR을 제대로 지원하지 않기 때문에 Redux가 매력적인 기능을 지녔다.