리액트 redux 상태관리

코딩알려주는 누나 강의를 보고 쓰는 글입니다.

 

리액트를 사용하면서 문제점이 있다.

이렇게 부모에서 자식으로만 state가 전달된다는 문제!

이렇게 되면 넘겨줘야하는 props가 너무 많아져서 관리하기도 힘들어지는데

이것을 해결하는 것이 상태관리!

 

store라는 공간에 state들을 넣어주어서 어느 컴포넌트든 사용할 수 있게 해주는 것!

이러한 상태관리를 도와주는 것이 바로 redux이다.

redux는 라이브러리로 구조는 아래와 같다.

Reducer는 단순히 함수로 그 아래에는 if문이나 switch문으로 action의 type들이 나열되어서 각각 하는 기능을 구현한 것이다.

Action은 type과 payload로 이루어진 객체로 type은 액션의 이름, payload는 매개변수라고 생각하면 된다.

 

redux를 사용하기 위한 기본세팅과 간단한 예제로 알아보자.

1. 터미널 열어서 redux와 react-redux 설치

npm i redux react-redux

2. index.js 또는 main.jsx에 <App>을 <Provider>로 감싸주기. 왜냐하면 store를 제공해주기 위해서, Provider는 항상 기본적으로 들어가는 props가 store다!

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

3. store파일 만들어주기. src > redux > store.js 이렇게 만들어줌

4.  store를 만드는 함수인 createStore를 import해주고 store를 만들어준다.

import { createStore } from "redux"

let store = createStore(reducer);

5. 행동지침이 있을 reducer파일을 만들어준다. src > redux > reducer > reducer.js 이렇게 만들어줌

6. reducer는 state와 action을 가진 함수이다.

let initialState = {};//state 초기값을 넣어줄 애들

function reducer(state = initialState, action){

}

export default reducer;

7. ruducer을 export했으니 store.js에서 import 해주고 export 해준다.

import { createStore } from "redux"
import reducer from "./reducer/reducer";

let store = createStore(reducer);

export default store;

8. store를 export했으니 다시 index.js 또는 main.jsx에서 store를 import 해주자

import store from './redux/store.js'

여기까지가 redux를 사용하기 위한 기본 세팅이다.
그렇다면 store의 값을 사용하고 변경하고 기타 등등 일을 하기위해서는 어떻게 할까?

먼저 store의 값을 저장하기 위한 방법, store에 만든 함수를 사용하는 방법
1. useDispatcher를 import 하고 사용해주자

import { useDispatch } from 'react-redux';

.
.
.

const dispatch = useDispatch();
dispatch({type: 'ADD_PERSEON', payload: {name:'아무개', age:20}}); //dispatch의 매개변수는 action이고 action은 type(액션이름)과 payload(액션에 넘겨주는 값)으로 이루어진 객체이다

2. 이렇게 던진 action은 reducer로 가서 추가해주자

let initialState = {
person: []
};//state 초기값을 넣어줄 애들

function reducer(state = initialState, action){
    switch(action.type){
        case 'ADD_PERSEON':
            return {...state, person:[...state.person, {name:action.payload.name, age:action.payload.age}]};
        default:
            return {...state};
}

이렇게 store의 state 값을 변경하거나 저장하거나 하는 일을 했다면 이 값을 사용하는건 어떻게 할까?
1. useSelector를 import 해주고 사용하기

import { useSelector } from 'react-redux'

.
.
.

const people = useSelector(state => state.person);