[React] Redux로 카테고리상태 관리

✔ 카테고리 구현하기

현재 쿼리 스트링을 이용해 카데고리 정보를 전송하고 있다.
프론트에서는 카테고리를 선택하면 쿼리스트링을 통해 정보를 전송하고, 선택한 카테고리의 색을 변경하려고 한다.

리액트에서는 컴포넌트를 사용해 페이지를 구성하기 때문에 선택한 카테고리의 정보를 공유하기 위해서는 redux를 사용해야 한다고 판단했다.

🔎Redux

redux는 전역상태관리 라이브러리이다.
리액트에서는 useState를 사용하여 로컬에서 상태를 관리하고, props를 사용하여 자식 컴포넌트에게 데이터를 넘겨줄 수 있다.

하지만 프로젝트의 규모가 커지게 되면, useState로 인한 컴포넌트 간 리렌더링이 빈번하게 발생하게 되며, props를 사용한다면 가독성이 떨어지게 된다.

이러한 이유로 어느 위치에 있던 redux의 store을 구독하고 있는 컴포넌트는 한번에 상태를 받을 수 있도록 전역상태를 관리하는 redux를 사용한다.

✔ 사용법

우선 필요한 라이브러리를 설치한다.

yarn add redux
yarn add react-redux

redux에서는 Action > Dispatch> Reducer > Store 순서로 데이터가 단방향으로 이동한다.

◾ store

redux에서는 store에 상태를 저장하여 사용한다.

◾ reducer

상태는 reducer를 통해 변경시킨다.
reducer 함수는 현재 state값과, action이라는 객체를 매개변수로 받는다.
그리고 전달받은 action에 따라 state값을 변경시킨다.

import { createStore } from 'redux';
import {Provider, useDispatch, useSelector } from 'react-redux';

const reducer = (currentState, action)=>{
    if(currentState=== undefined){
        return{
            selectedCategory:undefined,
            categoryList:undefined
        }
    }
    switch (action.type){
        case 'select_category':
            return {...currentState, selectedCategory: action.category};
        case 'category_list':
            return {...currentState, categoryList: action.categories};
        default:
            return currentState;
    }
}
const store = createStore(reducer);

action은 type을 필수 키로 가지고 있어야하며, 그 외의 필요한 데이터는 사용자가 설정할 수 있다.
현재 나는 categoryList와 selectedCategory라는 변수를 전역상태로 관리하고 있으며, action에는 category, categories라는 키로 설정하였다.

◾ dispatch

dispatch함수를 이용해 reducer로 action 객체를 전달한다.

const dispatch = useDispatch();

    const toggleBtn = (id)=>{
        dispatch({type:"select_category", category:id});
    }

이렇게 dispatch함수를 이용하면 action.type에 해당하는 select_category를 찾아가 category의 데이터 값을 selectedCategory에 전달해준다.

나는 toggleBtn이라는 함수를 만들어서 해당 카테고리를 선택하면 selectedCategory변수를 변경할 수 있도록 하였다.

◾ selector

store에 있는 state값을 사용하기 위해서는 useSelector 함수를 사용해야한다.

const categories = useSelector(state=>(state.categoryList));

◾ provider

만들어진 store를 사용하기 위해서는 provider로 store 구독을 해줘야한다.

<Provider store={store}>
    <div className="navi">
      	<Nav/>
    </div>
  <div className="body">
    {children}
  </div>
</Provider>

이렇게 되면 Nav 컴포넌트와 body안에 들어가는 컴포넌트들은 모두 store를 사용할 수 있다.