Redux 기본 개념과 작동 방식

Redux 기본 개념과 작동 방식

Redux 란?

상태 관리 라이브러리로 리액트를 사용할 때 상태를 관리하는 것을 도와주는 라이브러리다.

 

상태 관리를 왜 해야되는가? 에 대해 생각해보면, 리액트에서는 컴포넌트끼리 상태값을 주고 받을 때 props를 통해 주고 받는데, 자식관계가 딥해질 수록 중간 컴포넌트들에 의미없는 props 내려주기가 반복되고, 자식 컴포넌트들끼리 상태값을 직접 주고 받는 것이 불가능하다. (무조건 부모 컴포넌트를 거쳐야만 가능)

그리하여 상태 관리를 쉽게 도와주는 라이브러리들이 생겨났고, 그중에 가장 많이 쓰이는 상태 관리 라이브러리가 Redux 다. Redux는 공통으로 쓰이는 상태 값을 한 곳에 모아 필요한 곳에 뿌려주는 클라우드 개념이랄까? props로 내려주지 않고, 필요한 곳에서 바로 import 해서 꺼내 쓸 수 있다.

 

솔직히 Redux를 배우는 게 쉽지는 않다. 어렵다. 그 이유는 Redux에서 나오는 개념들이 익숙치 않기 때문이다. 그러나 리액트로 몇 가지 프로젝트를 해보다보면 Redux의 필요성이 뼈저리게 느껴진다. 컴포넌트들끼리 props를 주고받는 게 매우 귀찮고 헷갈리기 때문이다. 그러므로 Redux를 잘 익혀서 유용하게 써먹어보자.

 

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

Redux 의 사용 방법

Redux 는 npm 명령으로 설치해서 사용한다.

npm i redux react-redux

명령어를 보면 눈치챘겠지만, redux와 react-redux 두 가지를 설치하는 것을 알 수 있다. 왜 두 개를 설치하는 것일까? 사실, Redux는 리액트를 위해 생겨난 것이 아니다. Redux 의 공식 홈페이지에서 명시되어 있듯이, Redux는 ‘자바스크립트 앱을 위한 예측 가능한 상태 컨테이너’ 라고 소개하고 있다. 한 마디로 자바스크립트를 사용하는 범용 환경에서 사용될 수 있다.

 

redux만 설치해도 리액트에서 redux를 사용할 수 있지만, 리액트에서 사용하기 편한 내장함수를 추가적으로 사용하고 싶다면 react-redux를 함께 설치한다.

 

Redux에서 나오는 기본 개념과 작동방식

1. Store

‘저장 공간’ 으로 프로젝트 당 오직 하나의 Store를 가진다. 이 Store 내에 프로젝트에서 사용하는 모든 상태 값을 저장해놓고 사용한다. Redux에 내장된 createStore 라는 함수로 store를 생성하고 이 함수의 인자로 Reducer를 받는다.

import {createStore} from 'redux';
import Reducer from './reducers/reducer';

const store = createStore(Reducer);

export default store;

2. Action

Action 에서는 어떤 동작 방식으로 일을 할 것인지 액션 타입을 내려주게 된다. 예를 들어, To Do List를 관리하는 앱이라면, ‘할 일 추가’, ‘할 일 제거’, ‘할 일 완료’ 등의 동작 방식이 있을 수 있다. 이 것을 타입화 시켜서 객체 형태로 만들고, Reducer를 통해 Store로 전달해준다.

const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text: text,
  }
}

 

3. Reducer

Reducer 를 보통 설명할 때 깔때기 모양으로 표현한다. Reduce 라는 영단어의 뜻도 ‘줄이다’ 라는 뜻이다. 여러 액션 타입을 가지고 있는 Action 을 바로 Store 로 내려주게 되면 어떤 액션을 실행하라는 것인지 액션 타입이 지정되지 않았으므로 액션 타입을 지정해줄 수 있는 중간자(함수)가 필요하다. 이 함수를 가지고 있는 것이 바로 Reducer 다.

Reducer 에는 액션 타입에 따라 State 를 어떻게 처리할 것인지 로직이 담긴다. 로직은 순수 자바스크립트 함수로 작성하는 것이라 예측이 쉽고, 버그를 수정하기에도 용이하다.

Reducer 는 하나의 함수로 export default 를 지정해서 반환할 수 있는데, 액션 타입이 여러 개여서 함수가 여러 개 필요하다면, 파일을 여러 개로 쪼개서 combineReducers 를 이용해 한 데 모을 수 있다.

작동방식

1. Redux의 내장함수인 useDispatch() 에 액션타입을 넣어주고 컴포넌트에 파견한다. (useDispatch는 react-redux를 설치해야 사용할 수 있다.)
2. 액션타입에 따라 Reducer 안에 있는 로직을 수행하고 새로운 State를 반환한다.
3. 새로운 State는 Store에 저장된다.