[React] 리액트 상태 관리 라이브러리 리덕스(Redux) 쓰는 법

개요

리액트에서 상태관리를 할 때 리덕스를 쓰는 이유!!

1. 전역으로 상태 관리가 가능하다.

그냥 간단하게 하나의 파일 안에서 상태를 바꾸고 싶으면 간단하게 useState를 사용하면 되지만, 파일은 하나가 아니기에... 모든 파일을 넘나들 수 있도록 관리하는 게 필요하다.

2. 따라서 리덕스를 쓰면! 무한 props 지옥에서 탈출할 수 있다...

리덕스를 쓰면 아주아주 깔삼하게 상태 관리를 할 수 있다.

 

처음에는 리덕스가 너무 어려웠는데 이젠 아주 편하게 사용 중이다. 

리덕스를 어떻게 사용해야 할지 잘 모르겠다면  밑에 있는 내용대로만 하면 아주 편할 거다.

 

사용법

1. 우선 리덕스를 설치해준다.

npm install @reduxjs/toolkit react-redux

2.  루트(App.js와 동일한 위치)에 store.js를 하나 만들어준다. 

하나의 리액트 폴더에는 App.js가 하나 있는 것처럼, store.js도 무조건 하나만! 있어야 한다.

 

3. App.js와 index.js를 Provider로 감싸준다.

App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store'; 
import StickerComponent from './StickerComponent';

function App() {
  return (
    <Provider store={store}> //이렇게 Provider로 감싸준다
      <div className="App">
        <MyComponent /> 
      </div>
    </Provider>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'; 
import store from './store'; 

ReactDOM.render(
  <Provider store={store}>  //이렇게 Provider로 감싸준다
    <App />
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

 

4. slice를 만들어준다.

하나의 slice 안에는 여러 변수들을 넣을 수 있다. 나는 loginSlice를 만들어줬고, 그 안에 userId, token, hostid, alreadyuser를 넣어줬다. 이제 상태가 업데이트 되면 loginSlice가 업데이트 될 것이다.

초기값을 꼭 설정해줘야 하는데 initialState라는 객체를 하나 만들어서 넣어줘도 되고, 그냥 슬라이스 안에 넣어줘도 된다.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  userId: null,
  token: null,
  hostid: null,
  alreadyuser: false,
};

const loginSlice = createSlice({
  name: "login",
  initialState,
  reducers: {
    setId: (state, action) => {
      state.userId = action.payload;
    },
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setHostId: (state, action) => {
      state.hostid = action.payload;
    },
    //이미 가입한 유저
    setAlreadyuser: (state, action) => {
      state.alreadyuser = action.payload;
    },
  },
});

export const {
  setAlreadyuser,
  setId,
  setToken,
  setHostId,
} = loginSlice.actions;
export default loginSlice.reducer;

5.  store.js에 내가 만든 slice를 넣어준다.

나는 위에서 export default loginSlice.reducer를 해주어서 이를 불러와서 저장해주었는데 그냥 export default loginSlice라고만 하고 store에서 login:loginSlice.reducer라고 해줘도 된다.

import { configureStore } from "@reduxjs/toolkit";
import loginReducer from "./login/LoginSlice";

const store = configureStore({
  reducer: {
    login: loginReducer, //이렇게 추가!
  },
});
export default store;

 

6. 이제 상태를 업데이트하고 불러올 수 있다!

[상태 업데이트]

리덕스에서 상태를 업데이트 할 때는 dispatch함수를 사용한다.

  const dispatch = useDispatch();

이렇게 선언해주고 import 한 뒤, 나서 사용하면 된다.

내가 위에 있던 alreadyuser를 true로 만들어주고 싶다면, setAlreadyuser를 import하고 

dispatch(setAlreadyuser(true));

이렇게 써주면 값이 true로 바뀐다.

 

[상태 가져오기]

리덕스에서 상태를 가져올 때는 useSelector를 사용한다.

useSelector는 import 해주고 바로 사용하면 된다.

alreadyuser를 가져오고 싶으면,

const alreadyUser = useSelector((state) => state.login.alreadyuser);

이렇게 써주고, alreadyUser를 사용하면 된다.