[DAY - 85] Redux

지난 시간에 Reducer에 대해 간단히 알아보았는데 오늘은 Redux를 사용해 몇 가지 예제를 만들어 보았다.

context와 reducer 처럼 상태나 변수를 전역으로 관리할 때 사용하는데 Redux는 기본 내장되어 있는 기능이 아니라 라이브러리를 추가해 줘야 한다.

 

https://redux-toolkit.js.org/

Redux Toolkit | Redux Toolkit

 

 

1) Redux 라이브러리 추가

 

Redux 추가

 

yarn 혹은 npm으로 redux 라이브러리를 추가해 준다.

 

2) Redux DevTools (크롬 확장) 추천 사항

 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko 

Redux DevTools

 

크롬에 위 확장을 설치하면 쉽게 눈으로 확인할 수 있다.

 

Redux DevTools

Redux DevTools

 

3) Redux 색상 변경 예제

 

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { onRed, onGreen, onBlue } from '../../store/modules/colorSlice';

const Color = () => {
    const { color } = useSelector(state => state.color)

    const dispatch = useDispatch()
    return (
        <div>
            <h2 style={{ color: `${color}` }}>컬러 : {color}</h2>
            <p>
                <button onClick={() => dispatch(onRed())}>Red</button>
                <button onClick={() => dispatch(onGreen())}>Green</button>
                <button onClick={() => dispatch(onBlue())}>Blue</button>
            </p>
        </div>
    );
};

export default Color;

 

화면에 나타낼 컴포넌트인 Color.jsx에 받아올 변수와 함수를 작성한다.

 

import { createSlice } from '@reduxjs/toolkit'

const initialState = { color: 'orange' }

export const colorSlice = createSlice({
    name: 'color',
    initialState,
    reducers: {
        onRed(state) {
            state.color = 'red'
        },
        onGreen(state) {
            state.color = 'green'
        },
        onBlue(state) {
            state.color = 'blue'
        },
    }
})

export const { onRed, onGreen, onBlue } = colorSlice.actions

// 전부 내보내기
export default colorSlice.reducer

 

initalState로 color의 초기값을 orange로 설정하고, reducers 안에는 다른 컴포넌트에서 사용할 함수를 정의한다.

함수 속 state와 action은 현재값과 전달받은 값을 의미하는데, 현재 값은 state, 전달받은 값은 action.payload를 사용한다.

 

export const store = configureStore({
    reducer: {
        color
    }
})

 

configureStore함수가 들어있는 index.jsx를 작성하면 하위 컴포넌트에서 전역으로 사용 가능한 변수와 함수를 뿌려주게 된다.