React 프로젝트에서 Redux 사용하기

React 프로젝트를 진행하다 보면 몇 단계 아래의 자식 Component에게 props를 전달하거나, 자식 Component의 값을 부모 Component로 전달해야 하는 경우가 생긴다. 이러한 경우 javascript 혹은 React의 기능을 이용해서 문제를 해결할 수도 있지만, Redux를 이용하면 필요한 정보를 Redux로 저장한 뒤 가져오는 방식으로 해결할 수 있다.

 

1. React 프로젝트에 Redux 추가하기

React 프로젝트를 만들 때 Redux를 추가하기 위해서는, create-react-app의 인자로 --template redux를 제공하면 된다.

npx create-react-app <프로젝트를 생성할 디렉토리의 상대경로> --template redux

혹은 기존 React 프로젝트에 Redux를 추가하고 싶다면 Redux, 그리고 React와 Redux를 연결하는 react-redux를 설치하면 된다.

npm i @reduxjs/toolkit react-redux

 

2. React Component에 Redux store 등록하기

기존 Javascript에서 Redux를 사용하던 것처럼 configureStore 함수로 만든 store를 import할 수도 있지만, react-redux는 store와 dispatch를 Component의 props로 전달할 수 있다.

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';

const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
    <React.StrictMode>
        // Redux로 생성한 store를 react-redux의 Provider에 넣어
        // 원하는 Component에 store를 전달
        <Provider store={store}>
            <ReactComponent />
        </Provider>
    </React.StrictMode>
);

위 코드를 보면 react-redux에서 Provider라는 ComponentComponent를 가져오는데, 이 컴포넌트는 자식 컴포넌트에게  store를 전달하는 역할을 한다. 단순히 바로 자식 컴포넌트뿐만 아니라, 자식 컴포넌트의 자식 컴포넌트 역시, 즉 Provider 컴포넌트 안에 들어가는 모든 컴포넌트에 적용되므로 여러 번 사용할 필요 없이 최상위 Component, 혹은 store를 사용하는 가장 상위의 Component에서 사용하면 된다.

import { connect } from "react-redux"

const ReactComponent = (props) => {
    // Component 구현 코드...
}

const mapStateToProps = (state, props) => {
    // props에 state를 추가
    return { state, ...props }
}
const mapDispatchToProps = (dispatch, props) => {
    // props에 각 dispatch 함수를 추가
    return {
        dispatch_1: dispatch({type: ACTION_TYPE1}),
        dispatch_2: dispatch({type: ACTION_TYPE2}),
        dispatch_3: dispatch({type: ACTION_TYPE3}),
        ...props
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ReactComponent)

위 코드를 보면 mapStateToProps, mapDispatchToProps 함수를 새로 정의해 주고 있다. 이 두 함수는 위의 Provider에 제공한 store를 Component로 전달하는 역할을 하는데, 각각 state와 dispatch를 첫 번째 인자로, props를 두 번째 인자로 가지고, 둘을 이용해 만든 새로운 props를 반환해야 한다. 이 때 두 번째 인자가 불필요한 경우 인자를 하나만 사용할 수도 있다.

또한 ReactComponent가 바로 export되지 않고 export default 형태로 export되는데, connect라는 기이한 함수를 사용하는 것을 볼 수 있다. 이 함수는 위의 두 함수를 인자로 받아 새로운 함수를 반환하는데, 이렇게 반환된 함수에 store를 사용하고 싶은 Component를 인자로 지정하면 해당 Component에서 store를 사용할 수 있게 된다. 이 때 mapStateToProps, mapDispatchToProps 두 함수 중 불필요한 함수가 있다면, 해당 인자는 null로 비워둘 수도 있다.