React - 공유할 state가 많다면? Redux toolkit 라이브러리

컴포넌트끼리는 state를 props 문법으로 공유할 수 있다.

하지만 공유할 state가 많다면,... 자식 컴포넌트가 많은 복잡한 구조라면....! 

redux를 설치해보자.

 

리액트와 리액트 돔 버전이 18.1.x  이상이여야 설치가 가능하니

package.json파일에 가서 버전 확인/수정해준다.

 

터미널 오픈 후 install. 

npm install @reduxjs/toolkit react-redux

 

그리고 index.js에서 필요한 셋팅

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



// Provider로 <App />을 감싸주면 된다. 속성은 store
//그럼 이제 <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있다.

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

 

설치가 완료 됐다면 state를 하나로 관리하는 파일을 만들고(보통 store.js로 작명)

그 파일에 셋팅을 해준다.

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


// 공유할 state 생성. useState()와 용도가 비슷하다.
let cart = createSlice({ 
	name : '작명',
    initialState : 데이터구조
})


// 작명된 createSlice.reducer를 통해 등록하는 작업
export default configureStore({
  reducer: { 
  	cart : cart.reducer
  }
})

 

 

state를 사용할 때는 

// state를 사용할 컴포넌트 파일에서


import { useSelector } from "react-redux"


// useSelector 함수에 return값을 지정해주면 store에 저장했던 state가 다 담겨져온다.
// state.cart 이렇게만 return도 가능, 꺼내 쓸 때도 당연히 가능.

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

  return (생략)
}