[React] 전역상태관리 - context와 redux

전역상태관리를 하는 종류는 아주 다양합니다.

그중에서도 오늘은 context와 redux를 다뤄보려고 합니다.

 

전역상태관리를 하는 이유

전역상태관리를 하는 이유는 무엇이 있을까요?

바로 state가 여러 컴포넌트에서 사용될 때 편하게 사용하기 위해 쓰는데요, 대게 부모자식의 경우에는 props를 통해서 사용할 수 있지만, 만약 해당 state가 10개, 몇십 개의 컴포넌트에 사용된다고 하면  몇십 번을 props로 전달을 해줘야 하는 걸까요?  이렇게 많은 양의 상태를 공유하기 위해서 전역상태관리를 해주는 게 조금 더 간편하게 작업을 하는 것입니다.

주의할 점은 무작정 전역상태관리를 통해 state를 관리하는 게 아니라 정말 많은 양의 컴포넌트에 상태관리가 필요할 때만 사용하는 게 좋습니다.

 

useContext

useContext는 리액트에서 제공되는 훅으로 사용방식은 아주 간단합니다.

//index.js
import { createContext } from "react";

const App = () =>{
  let contextStorage = createContext(undefined);
  return (
    <div>
      // 기존 방식 = props 이용
      <Detail coffee={coffee} stock={stock}></Detail>
      // 전역상태관리 방식 = context 이용
      <contextStorage.Provider value={{ stock, coffee }}>
        <Detail></Detail>
      </contextStorage.Provider>
    </div>
  )
}

// Detail.js
import {useContext} from 'react';

const Detail = ()=>{
  let context = useContext(넘긴 context 이름 = contextStorage)
  return (
    <div>
    </div>
  )
}

전역상태가 필요한 컴포넌트를 context로 감싸주면 감싸진 컴포넌트 안에서 설정을 해주면 전역상태에 접근할 수 있게 됩니다.

 

이렇게 context는 컴포넌트가 많은 경우에 전역으로 변수 관리를 할수 있다는 장점이 있는데요.

단점으로는 전역변수를 하나의 컴포넌트에서 수정을 하게되면 전역상태관리를 설정한 모든 컴포넌트에 재렌더링이 되어 성능면에서 좋지 않고, 의존성이 존재하기 때문에 자유롭게 재사용하는데 문제가 있어 대게 context를 사용하기보다는 redux나 다른 상태관리 라이브러리를 사용합니다.(물론 해당 라이브러리도 100% 완벽한 상태관리를 하지 않습니다.)

 

Redux

redux는 react와 react-dom의 설치 버전이 18 버전 이상일 때 사용이 가능합니다.

redux는 다양한 버전이 존재하는데 그중에 @reduxjs/toolkit을 사용할 예정입니다.

redux 설치하기

npm i @reduxjs/toolkit react-redux

redux의 store

redux를 깔고나면 기본적으로 store.js를 생성해 주고 아래와 같은 코드를 작성해 줍니다.

// store.js
import {configureStore ,createSlice} from "@reduxjs/toolkit";
let user = createSlice({
  name: "user",
  initialState: [],
  reducers: {}
});
export default configureStore({
  reducer: {
    user: user.reducer
  }
});

 

store의 구조

1. createSlice()
   • createSlice함수를 통해 관리할 state를 설정할 수 있습니다.
   • name : state를 관리하는 명칭을 작성합니다.
   • initialState : state의 초기값을 설정합니다.
   • reducers : state의 변경함수를 작성하는 곳으로 생성된 변경함수는 export를 통해 내보내야 사용이 가능합니다.
     • reducers의 변경함수 생성은 간단합니다. reducers : {
         변경함수 (state, action){
         }
       }
     • state  : state는 관리하고 있는 상태를 말하며(initialState)
     • action : action은 payload와 type이 있고, payload는 변경함수를 사용할 때 사용된 props를 말합니다.
       ex) 변경함수(1), action.payload = 1
     • export {변경함수이름} = name.actions;
2. configureStore()
   • createSlice를 통해 생성된 전역상태변수들을 관리하는 곳으로 reducer안에 name : name.reducer가 들어가 있습니다.
   • index.js | index.tsx에서 import 된 store가 위 코드를 가져와 사용한 것입니다.

//index.js 추가코드
...
import store from './store';
import {Provider} from 'react-redux';

root.render(
  <React.StrictMode>
    <Provider store={store}> // 추가
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

 

컴포넌트에서 redux 사용하기

컴포넌트에서 redux를 사용하기 위해서는 useSelector과 useDispatch가 필요합니다.

useSelector : redux의 상태를 사용할 수 있는 함수

useDispatch : redux의 변경함수를 사용하기 위한 함수

let dispatch = useDispatch();
let data = useSelector((state) => {
  return state;
});

let plusHandler = ()=> {
  dispatch(incrementCount(1));
}