[React] redux 정리

redux는 자바스크립트 상태 관리 라이브러리로 리액트에서 가장 많이 사용된다.

useState를 사용하여 상태를 관리할 경우 루트 컴포넌트에서 종속 컴포넌트로 props를 전달하게 된다. 이 방식은 컴포넌트의 구조가 간단하다면 문제가 발생하지 않는다.

하지만 프로젝트의 규모가 커지거나 복잡해져서 그 하위의 하위의 하위 컴포넌트로 state를 전달해야 한다면, props를 계속 내려줘야 하고 전달받은 props가 어느 컴포넌트에서 온 것인지 알기 힘들어진다. 심지어 해당 state가 필요 없는 컴포넌트에서도 하위 컴포넌트로 전달해주기 위해 props를 받는 상황이 발생할 수도 있다.

이러한 종속성을 탈피하기 위해 프로젝트 루트레벨에서 state를 관리해주는 것이 리덕스이다.

store에 state를 저장하고 필요한 컴포넌트에서 state와 state를 바꾸는 함수를 전달받는다.

리덕스를 사용하기 전, 알아야 할 개념이 몇 가지 등장한다.

 

액션

상태에 변화가 생길 때 발생하며 하나의 객체로 표현된다.

액션 객체는 여러 속성을 가질 수 있고, 각각의 액션을 구분할 수 있게 type 속성은 반드시 갖고 있어야 한다.

나머지 속성들은 작성자가 필요한 상태를 마음대로 작성하면 된다.

//modules/survey.js
//액션 타입 정의
const SURVEY_INIT = 'survey/INIT';
const SURVEY_INSERT = 'survey/INSERT';
//액션 생성 함수
export const surveyInit = () => ({
  type: SURVEY_INIT,
});
export const surveyInsert = (surveyResult) => ({
  type: SURVEY_INSERT,
  surveyResult,
});

 

리듀서

리듀서는 액션이 발생했을 때, 상태 변화를 일으켜주는 함수이다. 액션 객체를 파라미터로 받아와서 해당 액션에 맞는 함수를 실행시켜 새로운 상태 값을 반환해준다.

리듀서는 하나만 사용해야하기 때문에 만약 리듀서 함수를 여러 개 작성했다면, 이를 하나로 합쳐주는 과정이 필요하다. (루트 리듀서)

//modules/survey.js
//초기상태
const initialState = {
  surveyResult: [],
};
//reducer 함수
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SURVEY_INIT:
      return {
        ...state,
        surveyResult: [],
      };
    case SURVEY_INSERT:
      return {
        ...state,
        surveyResult: state.surveyResult.concat(action.surveyResult),
      };
    default:
      return state;
  }
};

//modules/index.js
import { combineReducers } from 'redux';
import survey from './survey';

const rootReducer = combineReducers({
  survey,//여러 개의 리듀서라면 이어서 작성해준다.
});

export default rootReducer;

 

스토어

리액트 어플리케이션에 리덕스를 적용하기 위해 만들어줘야 하는 상태 저장소라고 생각하면 될 것 같다. 스토어는 하나의 프로젝트에 하나만 존재한다. 프로젝트의 루트 레벨에서 상태 관리를 하기 때문에 스토어는 index.js 파일에서 만들어줘야한다. 원래는 리덕스에서 제공하는 createStore로 스토어를 만들어줬지만 이제는 삭제됐기 때문에 @reduxjs/toolkit의 configureStore를 사용해야 한다. 마지막으로 컴포넌트에서 사용할 수 있도록 <App>컴포넌트를 react-redux에서 제공하는 <Provider>로 묶어줘야 한다.

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import rootReducer from './modules';

const store = configureStore({
  reducer: rootReducer,
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

 

이제 컴포넌트에서 상태를 가져다 쓰기만 하면 된다😆

connect 함수로 리덕스를 연동해서 써도 되지만 나는 react-redux에서 제공하는 Hook을 이용했다.

상태 조회는 useSelector(), 액션 디스패치는 useDispatch()를 사용했으며 connect 함수에 비해 코드의 길이가 짧아지고 가독성이 좋아진다는 장점을 갖는다.

 

useSelector() : 상태 조회

리액트에서 다른 페이지로 이동할 때 window.location.href="/"와 같이 페이지를 새로고침 하는 방식으로 이동하게 되면 state가 초기화돼서 상태 조회를 할 수 없다. 이를 방지하기 위해 Link 컴포넌트를 사용하거나 리액트 훅인 useNavigate()를 사용해주는 것이 좋다.

useDispatch() : 액션 디스패치

스토어의 내장 함수인 dispatch를 사용할 수 있게 해주는 훅이다. 함수 파라미터로는 액션 객체나 액션 생성 함수를 넣어주면 된다.

import { useSelector, useDispatch } from 'react-redux';
const survey = useSelector((state) => state.survey.surveyResult);
const dispatch = useDispatch();
dispatch(surveyInsert(answer));