Redux

🖥️ Redux

 

리액트는 단방향 통신이라 부모 컴포넌트가 자식 컴포넌트에게 props를 전달해주는 방식이다. 자식끼리 주고 받을 때도 부모를 거쳐 전달해야 한다. 그렇다면 props를 많이 써야 한다는 단점이 있다.

 

하지만 Redux를 사용한다면 상태저장소 저장으로 할당할 수 있다.

 

하지만 컴포넌트가 스토어로 직접적으로 바로 요청하지 못한다. 그래서 컴포넌트가 스토어로 가기까지의 4가지 스텝이 있다.

 

예를 들어 로그인 컴포넌트에서 로그인하기 Action을 던진다. 그럼 Reducer가 캐치해서 많은 작업 지시들이 있는 것을 인지하는 순간 작업을 시작한다. 스토어에서 컴포넌트를 바꿔준다.

 

여기서 Action을 던져주는 함수는 useDispatch라는 함수고, 또 스토어에 있는 값을 가져다 쓸 때는 useSelector라는 함수를 쓴다.

 

⌨️ Redux 설치

npm install @reduxjs/toolkit react-redux

 

프롬포트 창이나 터미널을 열어 명령문을 입력해 redux를 설치한다.

📌 설치하기 전 package.json 파일을 열어 
"react"
"react-dom"
두개가 18.1.x 이상이면 사용가능 하다.

 

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

 

 

⌨️ Redux 셋팅

1. store.js 라는 파일을 만들어야 한다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

 

2. index.js 파일로 가서 Provider라는 컴포넌트와 store파일을 import 시킨다. 그리고 밑에 <Provider store={store}> 로 감싼다. 이걸로 <App/>과 모든 자식 컴포넌트들을 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>
);

 

3. store.js를 기본 셋팅을 해준다.

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

let 원하는변수명 = createSlice({
    name: '원하는 네임',
    initialState: {},
    reducers: {
        원하는 함수(state, action) {
            return {
                ...state,
                checked: action.payload
            }
        }
    }
})

export let { 원하는 함수 } = 원하는변수명.actions;

export default configureStore({
    reducer: {
         checked: 원하는변수명.reducer,
    }
})

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

let checked = createSlice({
    name: 'checked',
    initialState: {},
    reducers: {
        changeState(state, action) {
            return {
                ...state,
                checked: action.payload
            }
        }
    }
})

export let { changeState } = checked.actions;

export default configureStore({
    reducer: {
         checked: checked.reducer,
    }
})

 

⌨️ Redux 사용법

💾 Redux dispatch

dispatch()를 사용하면 HTML 안에서 reducer 함수를 동작시킬 수 있다. 

즉, 위의 "수량증가", "수량감소" 데이터를 수정하기 위해 명령하기 위해 사용하는 함수이다.

 

dispatch({ type : 데이터 수정방법}) 

dispatch(changeState(allChecked));