리액트 - Redux : Redux Toolkit state 등록 및 사용

리액트를 사용하다 보면 서로 다른 컴포넌트 끼리 state를 주고 받기가 까다롭다. Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.

Redux를 사용하면 js파일 하나에 모든 state를 저장하고 이를 필요로 하는 모든 컴포넌트에서 import해서 사용 및 변경이 가능하다.

npm install @reduxjs/toolkit react-redux

redux toolkit을 사용할건데 이는 redux를 쉽게 사용할 수 있다. (문법이 더 쉬움)

그리고 redux를 사용하려면 "react", "react-dom"의 버전이 18.1.x 이상이어야 하니 package.json에서 확인해본다.

Redux 셋팅

(store.js)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

1. state들을 보관할 store.js파일을 만들어서 위 코드 복붙
   
   

(index.js)
import { Provider } from "react-redux";
import store from './store.js'

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

2. index.js파일 들어가서 Provider와 store import 해주고
   <Provider store={import해온거} > 이걸로 <App> 을 감싸면 된다.
   

store.js에 state들 보관하는 법

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

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

export default configureStore({
reducer: {
  user : user.reducer
}
}) 

1. createSlice( ) 상단에서 import 해온 다음
   { name : 'state이름', initialState : 'state값' } 를 위처럼 let 변수 = createSlice()안에 넣는다.
2. configureStore()의 reducer 안에 작명 : (createSlice담은 변수).reducer 하면 state등록이 끝나고 사용이 가능하다.
   
   
   

등록한 state 사용법

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

아무 컴포넌트에서 useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state가 그 자리에 남는다.

let a = useSelector((state) => state.user ) 

이런식으로 하나의 state만 가져오는것도 가능하다.

state 변경 방법은 다음 포스트 >>