React 에 Redux 설치하기! (feat.왜 React에 Redux를 사용할까?)

Redux를 설치하기전에!

🤷 왜 React에 Redux를 사용할까?

Redux 는 상태관리를 하기 위해서 사용하는데요.
간단하게 React에서 Redux를 사용하는 이유 중 하나는 성능 최적화입니다. (공식문서기준)
React 는 상태가 바뀔때마다 컴포넌트가 업데이트됩니다.
그말은 즉 상태가 바뀔때마다 재렌더링 된다는거죠.

"재렌더링..? 어떻게 재 렌더링 된다는거죠?"

리액트는 단방향 데이터 흐름 이기 때문에 부모컴포넌트는 자식 컴포넌트에게 props를 보내고 자식 컴포넌트는 부모컴포넌트의 props를 받습니다.
그럼 부모 컴포넌트의 상태값이 변하면 자식 컴포넌트도 렌더링이 되겠죠? 
부모 컴포넌트가 상태값이 변할때마다 자식컴포넌트도 같이 재렌더링되요. 
그래! 자식이 하나 있으면 뭐 괜찮아요 
하지만 자식컴포넌트가 여러개라면??

부모에서 막내 컴포넌트까지 props를 계속 전달하는것도 까다롭고 만약에 부모 컴포넌트가 전달해준 상태값이 변히게 되면 모든 컴포넌트들이 렌더링 될겁니다. 그렇게 되면 불필요한 렌더링이 일어나고 굉장히 성능적으로도 별로겠죠.
또 props를 부모에서 막내컴포넌트까지 여러 컴포넌트를 거쳐 전달하게 되면 유지보수 측면으로 상태관리하기가 힘들어집니다. 
이래서 Redux를 사용하게 됩니다.
Redux를 사용하게되면 Store에서 상태를 관리하고 업데이트 해줍니다.
스토어는 컴포넌트 밖에서 관리를 해주니까요! 컴포넌트를 타고타고 가서 상태를 관리해주는 일은 없겠죠!




1. 모듈 설치

npm i redux react-redux

npm i --save-dev redux-devtools-extension

redux 와 리액트와 redux를 바인딩 해주는 react-redux 설치를 하고
redux상태를 확인하기 위한 redux-devtools를 설치해줍니다
저는 테스트를 위해 creat-react-app 으로 설치하였어요 

2. reducer 파일 만들기

📁 reducer/index.js src 폴더 안에 reducer 폴더를 만들어 줍니다.
이 파일 안에 action,reducer,state 값을 넣어줄거에요.

3. action 지정

상태가 변할때 action 을 보냅니다. 밑에와 같은 action type 을 지정하여 import 하여 사용합니다. 

//액션
export const ADD_NUM = "ADD_NUM";

4. reducer 만들기

action 을 통해 이전상태를 변경해주는 함수입니다.
action type 과 이전 state값을 파라미터로 받습니다.

// reducer/index.js


// state의 초기값
const initState = {
    num: "",
    content: "",
};

//액션
export const ADD_NUM = "ADD_NUM";

const reducer = (state = initState, action) => {
    switch (action.type) {
        case ADD_NUM:
            return {
                ...state, // 불변성 유지
                num: action.data, // 변경할 state값
            };
        //기본값
        default:
            return state;
    }
};

export default reducer;

 

5. store 생성

state가 저장되는 저장소입니다.
store에는 dispatch 메소드를 가지고 있는데요
dispatch를 통해 action을 보내면 reducer를 호출하여 바뀐 state값이 store에 저장됩니다.

// index.js 



import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./reducer";
import { composeWithDevTools } from "redux-devtools-extension";

// store 생성(reducer,devtools 연결)
const store = createStore(reducer, composeWithDevTools());

ReactDOM.render(
//provier 컴포넌트로 store 에 접근
    <Provider store={store}> // store 연결
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </Provider>,
    document.getElementById("root")
);

 

 

 

6. dispatch(action) 하기

상태를 변경하기 위한 메소드에요 
dispatch 는 useDispatch를 사용하여 action 을 보낼수 있습니다.
action 은 객체로 이루어져 있습니다

// App.js


import { useDispatch } from "react-redux";
import { ADD_NUM } from "./reducer";
import { useState } from "react";

function App() {
    const [value, setValue] = useState(0);
    const dispatch = useDispatch();

    const onClickAddNum = () => {
        setValue((prev) => prev + 1);
        dispatch({
            type: ADD_NUM,
            data: value,
        });
    };

    return (
        <div className="App">
            <p>{value}</p>
            <button type="button" onClick={onClickAddNum}>
                클릭
            </button>
        </div>
    );
}

export default App;

7. 정상동작

👨‍👨‍👧‍👦👨‍👨‍👧‍👦👨‍👨‍👧‍👦👨‍👨‍👧‍👦 

react를 사용하면 효율적인 상태관리를 위해 redux의 사용이 필요한것 같습니다
간단한 app을 만든다면 redux 를 사용하지 않아도 됩니다 이건 프로젝트에 따라 다르겠죠 ? 
또한 redux는 동기적 데이터 흐름만 지원하기 때문에 비동기 호출을 하려면 미들웨어가 필요합니다.
대표적으로 thunk, saga 가 있는데요
다음 포스팅에서 미들웨어에 대하여 다루도록 하겠습니다.