[React] Redux (toolkit) 라이브러리 사용 및 설치

1. 정의

Redux란?

• 여러 컴포넌트가 공유하는 State를 관라하기 위한 JavaScript 라이브러리다.
• React와 사용하기 위해서는 React Tool Kit을 함께 설치해야한다.
• Redux를 이용하면 하나의 js파일에 모든 state를 보관해 prorps 없이 state를 공유가능하게 만들 수 있다.

2. 설정

• 설치하기전 현재 리액트 버전이 18.1.0 버전 이상인지 확인 후 설치한다.  ( 그 아래는 사용 불가)
• 추가로 NPM을 선행 설치해야한다.
• 설치를 위해 vscord 터미널에서 다음과 같이 명령어를 입력한다.

npm install @reduxjs/toolkit@1.8.1 react-redux

 

• 설치가 완료됐다면 state를 관리하고 보관할 파일을 생성하고 설정한다.

//현재 경로에서 data.js 생성 
//data.js에 다음 내용 입력

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

• index.js 파일로 이동해서 Provider 컴포넌트와 data.js 파일을 import 하면 데이터를 사용할 준비는 끝난다.

import { Provider } from "react-redux";
import store from './data.js'

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

 

3. 사용법

• 사전에 생성한 data.js 파일에 state를 만드는 방법

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

//1. createSlice()로 state 생성  
// name : 'state_name', initialState : 'state_value'

let chicken = createSlice({
  name : 'chicken',
  initialState : 'Spicy Chicken'
})

//2. configureStore() state 등록 
// 사용할_이름 : 만든_변수.reducer

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

 

• 생성한 state를 가져와 다른 컴포넌트에서 사용하는 방법

//사용할 컴포넌트에 import 
import { useSelector } from "react-redux"

function Subpage(){
  // 받을 변수 = useSelector((state) => { return state }) : 모든 state를 다 가져옴 
  // let a = useSelector((state) => state.chicken )  :  chicken만 가져옴
  let Chicken = useSelector((state) => { return state } )
  console.log(Chicken)

  return (
  ....
  )
}