[Web] 리액트 state 관리 (Redux, Redux Toolkit)

1. Redux toolkit 라이브러리 설치

(1) 설치

설치 참고 : https://redux-toolkit.js.org/

리액트의 state 사용을 편하게 하기 위해 Redux 개선 버전인 Redux toolkit을 설치한다.

리액트 프로젝트 폴더 안에서 명령어를 실행한다.

$ npm install @reduxjs/toolkit react-redux

(2) 셋팅

a. src/store.js 파일 생성

src/store.js 파일을 만들어 아래와 같이 작성한다.

이 파일을 통해 state 들을 보관한다.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
    reducer: {
    }
})

export default store;

b. src/main.jsx 파일 수정

src/main.jsx 파일을 아래와 같이 수정한다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";

import App from './App'
import './index.css'
import store from './store.js'

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

• import { Provider } from "react-redux"; 추가
• import store from './store.js' 추가
• <Provider store={store}>, </Provider>으로 <App />을 감싸기

2. state 보관

createSlice( )으로 state를 만들고, configureStore( )으로 등록한다.

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ]
})

const store = configureStore({
  reducer: {
    user : user.reducer,
    cart : cart.reducer
  }
})

export default store;

3. state 불러오기

useSelector()를 이용하여 state를 불러온다.

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => state.user);
  let state = useSelector((state) => state);

  console.log(a);
  console.log(state.cart[0].name);
  console.log(state.cart[0].count);

  return (생략)
}

4. state 변경

(1) state 수정 함수 생성

store.js에서 reducers:{} 안에 state 수정 함수를 만든다.

store.js 맨 아래에 export let { changeName } = user.actions을 추가한다.

slice이름.actions으로 적으면 state 변경 함수가 모두 변수에 저장되어 export 된다.

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state;
    }
  }
}) 

export const { changeName } = user.actions;

(2) state 수정 함수 사용

dispatch( state변경함수() )처럼 감싸서 실행하면 state 변경 함수가 실행된다.

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

(생략) 

<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button> 

(3) 변경함수 파라미터

함수 파라미터자리에 넣은 값을 action.payload 처럼 불러와 사용한다.

action.type은 state 변경함수 이름

action.payload은 파라미터

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, action){
      state.age += action.payload
    }
  }
}) 

(4) state가 array/object인 경우

state가 array/object인 경우 아래와 같이 state를 직접 수정이 가능하다.

그래서 문자나 숫자 하나만 필요한 경우에도 array/object를 사용하기도 한다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
})