React > Redux (전역 상태 다루기)

React 에서 데이타의 흐름은 부모 컴포넌트에서 자식 컴포넌트로 흐른다.

반대로는 불가능하다.

이말은 부모는 자식을 변화시킬 수 있지만, 자식은 부모를 변화 시킬 수 없다.

 

규모가 커지고 복잡해진다면? 혹시 자식이 부모를 변화시킬 수 있다면? 화면 랜더링은 너무나 복잡해진다.

 

전역 변수를 선언하고 각각의 컴포넌트에서 확인하면 간단하지 않을까?

하지만 해결 해야할 중요한 문제가 있다?

 

전역 변수를 참조하는 컴포넌트가 변수의 변화를 자동으로 감지해서 화면을 갱신해야 한다.

즉 이벤트를 구독하고 화면을 갱신하는 프로그램을 제작해야 한다.

 

이러한 문제를 해결해 주는것이 Redux 모듈이다.

 

---

 

우선 저장소가 필요하다.

/redux/store.js

import React from 'react';
import { configureStore } from '@reduxjs/toolkit';

export default configureStore();

-> redux toolkit 사용함 

 

저장소가 사용될 범위를 지정해 줘야 함.

/index.js

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

    <Provider store={store}>
      <App />
    </Provider>

 

여기까지가 기본 코드임.

 

상태변수, 함수 만들기

다음은 상태 저장소 이름과 상태를 변경하는 함수를 만들어야 한다.

 

기본 코드이다. 그냥 복사해서 붙여넣기 하자.

/redux/counter.js

 

createSlice 를 이용해서 상태 변수와 함수를 제작한다.

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

export const counterSlice = createSlice({
    name: "counter",
    initialState: {value: 0},
    reducers: {
        init: (state) => {
            state.value= 0
        },
        increment: (state) => {
            state.value = state.value + 1
        },
        decrement: (state) => {
            state.value = state.value - 1
        }
    },
});

// 제일 중요한 부분이네..userSlice.actions
export const { init, increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

 

 

Store 에 등록하기

이전에 만들어둔 Store 에 등록만 하면 된다.

import React from 'react';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counter'

export default configureStore({
  reducer: {
    counter: counterReducer
  },
})

 

이제 store.counter 가 전역 변수로 선언 되었다.

 

꺼내쓰기

다음은 컴포넌트에서 store.counter 를 꺼내쓰는 방법은 ?

/components/Counter.js

import React from "react";
import { useSelector } from 'react-redux'

function Counter () {

    const counter = useSelector((store) => store.counter.value)

    return (
        <div>
            <div>{counter}</div>
        </div>
    )
}

export default Counter;

 

변경하기 - 구독

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

dispatch() 함수를 이용해서 제작해둔 reducer 함수와 이벤트를 연결시켜야 한다.

 

전체코드

import React from "react";
import { useDispatch } from 'react-redux';
import { init, increment, decrement} from '../redux/counter'
import { useSelector } from 'react-redux'


function Counter () {

    const counter = useSelector((store) => store.counter.value);
    const dispatch = useDispatch();

    return (
        <div>
            <div>{counter}</div>
            <button onClick={()=>{
                dispatch(init())
            }}>init 초기화</button>
            <button onClick={()=>{
                dispatch(increment())
            }}>+ increament</button>
            <button onClick={()=>{
                dispatch(decrement())
            }}>- decreament</button>
        </div>
    )
}

export default Counter;

 

Component 에서 이벤트가 발생했을때 구독 관리는 dispatch() 함수가 진행한다.