[React] Redux 라이브러리 설치 및 사용법

Redux 라이브러리를 쓰는 이유

• 중앙 집중화된 상태 관리: Redux는 애플리케이션의 상태를 하나의 중앙 저장소에 저장하고 관리합니다. 이를 통해 상태의 변화를 예측 가능하게 하고, 디버깅 및 테스팅이 쉬워집니다.
• 예측 가능한 상태 변화: Redux는 상태 변화를 예측 가능한 방식으로 처리하며, 이는 액션(Action)에 의해 상태가 어떻게 변경되는지를 명시적으로 정의합니다. 이로써 애플리케이션의 동작을 추적하고 이해하기 쉬워집니다.
• 단방향 데이터 흐름: Redux는 단방향 데이터 흐름을 따릅니다. 액션 → 리듀서 → 상태 업데이트 순서로 데이터가 흐르기 때문에 데이터 흐름이 일관되고 예측 가능하며 디버깅이 용이합니다.
• 컴포넌트 간 상태 공유: Redux는 컴포넌트 간에 상태를 공유하기 쉽게 만들어줍니다. 여러 컴포넌트에서 동일한 상태를 사용해야 하는 경우, Redux를 사용하면 중앙 상태 저장소를 통해 상태를 공유할 수 있습니다.
• 외에도 여러 이유가 있다. (chatGPT)

---

redux 설치

 

-> 설치 전 확인 : package.json 파일의 react와 react-dom 둘 다 18.1.x 이상이여야 한다. 

 

npm install @reduxjs/toolkit react-redux

 

-> 터미널에 실행

---

redux 세팅하는 법

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

-> 아무곳이나 store.js 파일을 만들어서 위 코드 작성 (state 보관할 파일)

 

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

 

-> index.js 파일에서 Provider 컴포넌트와 작성한 파일 store를 import 해온 후 위처럼 세팅합니다.

---

store에 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값' } 이거 넣으면 state 하나 생성가능합니다. 
2. state 등록은 configureStore( ) 안에 하면 됩니다. { 작명 : createSlice만든거.reducer } 이러면 보관 끝

---

store에 있던 state 가져다 쓰는 법

import { useSelector } from "react-redux"

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

  return (생략)
}

---

store에 있던 state 변경하는 법

1. store.js 안에 state 수정해주는 함수부터 만듭니다.

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

 

• slice 안에 reducers : { } 열고 거기 안에 함수 만들면 됩니다.
• 파라미터 하나 작명하면 그건 기존 state가 됩니다.
• return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아 치워 줍니다. 

 

2. 다른 곳에서 쓰기좋게 export 해둡니다.

export let { changeName } = user.actions

 

3. 원할 때 dispatch()로 감싼 후에 함수를 import 해서 사용한다.

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

(생략) 

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