Redux와 React-redux의 기초적인 사용법

Rosevillage·2023년 2월 24일

React TIL redux

상태관리 라이브러리 redux와 react에서 사용되는 react-redux의 기초적인 사용법을 간단하게 정리해 본다.

Redux

javascript 앱을 위한 예측 가능한 상태 컨테이너를 제공하는 라이브러리로, vanilla javascript 혹은 다양한 javascript UI 라이브러리에서 사용이 가능하다.

react를 예시로 redux의 대표적인 역할은 다음과 같다

각 컴포넌트에서 지역적으로 관리하던 state를 store라는 단일 저장소에 모아서 전역적으로 한번에 관리할 수 있도록 돕는다.
props dliling을 통해 여러 단계를 통해 하향식으로 전달하던 데이터를 각각 독립적으로 접근 가능하게 한다.

한 장소에서 관리하기 때문에 유지 보수나 디버깅에 유리하다는 장점을 지닌다.

React-reducer 설치

우선 두가지 방법이 존재하는데 공식문서에서는 redux/toolkit으로 설치해 사용하는 것을 권장한다.
redux/toolkit을 사용하면 thunk, Devtools등 여러 미들웨어를 자동으로 설정해주고 추가적인 hook이 있다는 장점이 있지만
지금은 Redux의 기초적인 이해를 위해서 정리하는 것이기 때문에 toolkit은 설치법 외 설명은 추후에 따로 한다.

react-redux

create react를 통해서 만들때 한번에 하는 경우는 다음과 같이 설치한다.

npx create-react-app my-app --template redux

기존 react앱에 추가하는 경우 다음과 같이 설치한다.

#npm
npm install react-redux

#Yarn
yarn add react-redux

redux-toolkit

redux-toolkit와 react-redux를 한꺼번에 설치할 때는 다음과 같이 설치한다.

#npm
npm install @reduxjs/toolkit react-redux

#yarn
yarn add @reduxjs/toolkit react-redux

toolkit만 설치할 때는 다음과 같다.

#npm
npm install @reduxjs/toolkit

#yarn
yarn add @reduxjs/toolkit

React-redux 기본적인 구조

redux는 다음과 같은 요소들을 통해 구성된다.(최소한의 구성요소)

Provider : 컴포넌트가 store 내의 state에 접근할 수 있게 해주는 관문
store : state 컨테이너
reducer : state 변경함수
dispatch : action을 reducer로 전달하는 함수
state : 가변적인 값
action : 변경함수에 전달할 객체
- type : 사전에 합의된 state를 변경할 키워드
- payload : 변경함수에 전달할 값

Provider

내부 속성에 store를 포함하며, 컴포넌트들이 store에 접근할 수 있게 해준다.

Provider 태그 안에 있는 컴포넌트들은 useSelector 등을 통해 state에 접근할 수 있다.

<Provider store={store}>
  <App />
</Provider>

store

state를 저장하고 관리하는 컨테이너로 legacy_createStore as createStore 나 configureStore로 생성할 수 있다.

위에서 설명했듯이 공식문서에서는 현재 redux/toolkit 설치를 통한 configureStore사용을 권장하고 있지만 기초적인 이해를 위해 해당 내용은 추후에 따로 정리한다.

import {legacy_createStore as createStore} from 'react-redux'

const store = createStore(reducer);

reducer

상태를 변경할 키워드와 규칙을 정해놓은 함수로 state와 action를 인자로 받는다.

createStore나 configureStore에 인자로 전달된다.

const initialState = 1;
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREASE' :
      return state+1
    case 'DECREASE' :
      return state-1
    case 'SET_NUM' :
      return action.payload
    default :
      return state
  }
}

dispatch

action을 reducer로 전달하는 함수로 useDispatch hook을 통해 사용할 수 있다.

import {useDispatch} from 'react-redux';
const dispatch = useDispatch();

const countUp = () => {
  dispatch({type: 'INCREASE'})
}

state

기존의 state와 같은 개념으로 useSelector hook을 통해서 가져올 수 있다.

import {useSelector} from 'react-redux';

const state = useSelector(state=>state);

action

주로 type과 payload를 속성으로 가지는 객체

dispatch를 통해 reducer로 키워드를 전달해 사전에 약속된 상태 변경 동작을 실행시킨다.
(무조건적으로 type, payload가 아니어도 된다.)

// payload가 필요 없는 경우
{type: 'DECREASE'}
// payload가 필요한 경우
{type: 'SET_NUM', payload: 5}
// 미리 함수로 정해놓고 dispatch에 전달하는 방법도 있다.
const increase = () => {
  return {type: 'INCREASE'}
}

const dispatch = useDispatch()

dispatch(increase())