Redux (1) : props 없이 state 공유 가능

Redux

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.

 

1. Redux 설치

npm install @reduxjs/toolkit react-redux

※ redux toolkit : redux의 개선버전 (문법이 좀 더 쉬워짐)  

 

근데 설치하기 전에 package.json 파일을 열어서 "react", "react-dom" 항목의 버전을 확인한다. 이거 두개가 18.1.x 이상이면 사용가능하다. 

▲ 그게 아니면 직접 두개를 18.1.0 이렇게 수정한 다음 파일저장하고 터미널에서 npm install 누르면 된다. 

 

 

2. Redux 셋팅

① 아무곳(예를 들면, src 폴더 안)이나 state들을 보관하는 파일인 store.js 파일을 만들어서 아래 코드를 복붙해준다. 

(src/store.js)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

② index.js 파일가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해온다. 

그리고 밑에 <Provider store={import해온거}> 이걸로 <App/> 을 감싸면 된다. 

그럼 이제 <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있다.

(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>
);

 

 

3. Redux store에 state 보관하는 법 

step 1. createSlice( ) 로 state 만들고

createSlice( ) 상단에서 import 해온 다음에

{ name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능 

(createSlice( ) 는 useState( )와 용도가 비슷)

 

step 2. configureStore( ) 안에 등록

state 등록은 configureStore( ) 안에 { 작명 : createSlice만든거.reducer } 로 등록

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

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

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

 

 

4. Redux store에 있던 state 가져다쓰는 법

아무 컴포넌트에서 useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state 사용 가능 

(Cart.js)

import { useSelector } from "react-redux"

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

  return (생략)
}

이런 식으로 쓰면 좀 더 편리할 수도 있다.

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