[React] Redux Toolkit

목차

1. redux란

2. redux 사용방법

3. redux 제어하기

4. context api와 redux

---

REDUX 란

redux는 전역 상태 관리 라이브러리로 독립적인 컴포넌트들의 상태를 효율적으로 관리해줄 수 있는 도구입니다.

 

FLUX 패턴

flux패턴은 상태를 효율적이고 예측 가능한 방식으로 관리하기 위해 만들어진 규칙입니다.

redux는 엄격한 규칙과 flux패턴을 기반으로 상태를 전달하는 것이 아닌 상태를 관리하고 데이터의 흐름 및 상태가 어떻게 변경 되는지 추적 할 수 있습니다.

https://dev-watnu.tistory.com/82

flux패턴은 단방향 데이터 흐름을 따릅니다. 그렇기 때문에 상태 변경이 더 직관적으로 관리하기 쉬워지게 됩니다.

 

redux 구성 요소

https://www.linkedin.com/pulse/some-topic-flow-redux-toolkit-i-cover-jeet-sikder

action

상태를 어떻게 변경할지 정의하는 객체입니다.

{
    type: "cart/choice",
    payload: 1
}

action에는 type과 payload를 포함하고 있습니다.

type은 "cart/choice"와 같이 정의되어 있으며 [state이름/action이름]으로 자동 정의되는 것 같습니다.

payload는 action에서 전달하고자 하는 인자 값입니다.

 

dispatch

action을 reducer에 전달하는 유일한 방법입니다.

컴포넌트는 dispatch(action)으로 상태 변경 이벤트를 reducer에게 전달합니다.

 

reducer

현재 상태와 action을 받아 새로운 상태를 반환하는 순수 함수입니다.

sotre에 저장된 상태를 변경하는 단계입니다.

reducers: {
        //dispatch로 전달받은 action
        //state : 현재 상태, action : 전달받은 action(type, payload)
        choice(state, action) {
            const itemIndex = action.payload;
            const item = state[itemIndex];
            state[itemIndex].count += 1;
        }
}

 

state를 reducer 내에서 직접 수정하는 방법과 상태가 변경된 새로운 상태를 return하는 방법이 있습니다.

 

store

애플리케이션의 redux 전역 상태를 보관하는 저장소입니다.

state 및 reducer 등이 등록되어 있습니다.

 

redux 사용방법

1. store 저장소 생성

import {configureStore, createSlice} from "@reduxjs/toolkit"

const cart = createSlice({ //(1) slice
    name: 'cart', 
    initialState : [
        {name: '상품권', count: 0},
        {name: '겨울 코트', count: 0},
        {name: '가을 아우터', count: 0}
    ],
    reducers: {
        choice(state, action) {

            const itemIndex = action.payload;
            const item = state[itemIndex];

            state[itemIndex].count += 1;
        }
    }
})


export let { choice } = cart.actions //(2)actions 반환

export default configureStore({ //(3) store 설정
    reducer: {
        cart : cart.reducer
    }
})

 

전역 상태를 저장하는 저장소인 store를 생성합니다.

store에 state, reducer, action 등을 정의해 주어야 합니다.

 

(1) slice 정의

store에서 관리될 state를 정의해야합니다. slice를 통해 state와 state와 관련된 reducer, action을 정의 할 수 있습니다.

 

• name : slice 이름을 지정하는 역할입니다. action타입의 접두사로 사용됩니다.
• initialState : state의 초기값 역할입니다.
• reducers : state의 action을 정의하는 역할입니다. action은 반드시 reducers 내부에 작성해야합니다.

 

(2) action 반환

독립적인 컴포넌트에서 action을 사용할 수 있도록 반환해 줘야합니다.

state의 reducers 내부에 정의한 actions를 state 별로 반환해주어야 합니다.

 

(3) store 설정

store파일에서 생성한 slice들은 합쳐서 하나의  저장소로 설정해줍니다.

 

2. 애플리케이션에 store 연결

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

function ReduxProvider({children}) {
    return (
        <Provider store={store}>{children}</Provider>
    )
}

export default ReduxProvider

import './App.css';
import ReduxProvider from "./util/provider/ReduxProvider";
import MainComponent from "./component/MainComponent";

function App() {

    return (
        <>
            <ReduxProvider>
                <MainComponent/>
            </ReduxProvider>
        </>
        )
}

export default App;

 

상태를 저장하는 store를 Provider를 통해 하위 컴포넌트에 전달하도록 provider 컴포넌트를 만들어 줍니다.

그리고 Provider컴포넌트의 하위 컴포넌트를 정의해줍니다.

위와 같은 설정으로 하위 컴포넌트들은 store에서 제공하는 함수 및 상태를 사용할 수 있게 됩니다.

3. 컴포넌트에서 상태 조회

import {useSelector} from "react-redux";

function Cart() {

    let cart = useSelector((state) => state.cart) //(1)store에 저장된 state 조회

    return (
        <div>
            <h4>상품 카트</h4>
            <table className="table table-striped table-hover">
                <tbody>
                {cart.map((item, i) => (
                    <tr key={i}>
                        <td>{i + 1}</td>
                        <td>{item.name}</td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    )
}

export default Cart

 

redux에서 제공하는 useSelector를 통해 cart로 정의되어있는 state를 조회해 올 수 있습니다.

cart라는 변수명 선언은 아래와 같이 store 설정시 정의한 값으로 사용되어집니다.

export default configureStore({
    reducer: {
        cart : cart.reducer //cart라는 이름으로 정의한 것으로 state 사용
    }
})

 

상태 제어하기

redux의 저장소에서 관리하는 상태를 제어하기 위해서는 action과 dispatch 그리고 reducer를 사용해야합니다.

 

import {useDispatch, useSelector} from "react-redux";
import {choice, remove} from "../util/redux/store"; //(1) store에서 반환한 상태의 action함수

function Cart() {

    const dispatch = useDispatch(); //(2) action을 reducer함수에 전달할 dispatch 정의

    let cart = useSelector((state) => state.cart)

    function handleChoice(idx) {
        dispatch(choice(idx)) //(3) 상태의 action 발생
    }

    return (
        <div>
            <h4>상품 카트</h4>
            <table className="table table-striped table-hover">
                <tbody>
                {cart.map((item, i) => (
                    <tr key={i}>
                        <td>{i + 1}</td>
                        <td>{item.name}</td>
                        <td>{item.count}</td>
                        <td>
                            <button onClick={()=>handleChoice(i)}>choice</button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    )
}

export default Cart

 

상태의 변경은 action의 발생을 시작으로 이루어 집니다.

1. action 선언 : action들은 store에서 정의된 함수로 불러 올 수 있습니다.
2. dispatch 선언 : action을 reducer로 전달해 줘야하는데, 이 역할을 dispatch가 수행합니다. redux에서 제공하는 useDispatcher를 통해 dispatch를 가져올 수 있습니다
3. action 호출 : 선언한 dispatch로 action을 호출합니다. 해당 호출을 통해 action은 dispatch를 통해 reducer로 전달됩니다.

---

 

Context API와 Redux 차이

전역 변수 사용을 위해 context api와 redux를 배웠습니다. 둘다 컴포넌트에 독립적으로 사용할 수 있다는 공통점을 가지고 있는것 같은데..  왜 redux라는 라이브러리를 굳이 만들었고 많이 사용되는지 알아보겠습니다.

 

redux를 사용하는 이유

context는 간단한 전역 상태나 테마, 사용자 인증 같은 값을 전달하기 좋으나,  redux는 복잡한 로직과 대규모 상태 변화를 처리하는데 최적화되어 있습니다.

 

예측 가능한 상태 변화

• context api는 useState를 통해 상태를 변경하며, 변경 로직이 흩어져 있을 수 있습니다.
• redux는 action을 dispatch하고 reducer를 통해서만 상태를 변경하도록 강제하여 "언제, 왜, 무엇이" 상태를 변경했는지 추적에 유용합니다.

성능 최적화

• context api는 context의 value가 변경될 때 마다 하위 모든 컴포넌트가 불필요하게 리렌더링 될 수 있습니다.
• redux는 useSelector를 통해 자신이 실제 구독하는 상태의 일부가 변경되었을 때만 효율적으로 리렌더링되도록 내부적으로 최적화합니다.

 

conatext와 redux의 사용 목적

기준	Context API	Redux
상태의 복잡도	단순하거나 빈번하게 변하지 않는 상태 (테마, 사용자 인증 상태)	복잡하고 자주 변화하며 로직이 얽혀 있는 상태 (장바구니, 비동기 데이터)
필요한 기능	props drilling	디버깅, 미들웨어
개발 규모	소규모 프로젝트	중대형 프로젝트

 

---

참고

https://nayah.tistory.com/139

Redux Toolkit (RTK) slice 개념과 사용법 정리

https://dev-watnu.tistory.com/82

[React] Redux와 Redux Toolkit