[gproro-shop-app] category 컴포넌트 구현 with Redux

 

 

이 중에 맨 상단에 카테고리 탭을 구현할 것이다.

 

1. 카테고리 슬라이스 생성

카테고리 폴더안에 파일을 만들어준 뒤

export const CategoriesName = {

    All:"",

    Electronics:"Electronics",

    Jewelry:"Jewelery",

    MensClothing:"Men's clothing",

    WomensClothing:"Women's clothing"

}

 

type 파일을 만들고, 

 

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

import { CategoriesName } from "./categories.type";

const initialState = CategoriesName.All;   //초기에는 "" 

const categoriesSlice = createSlice({

    name: "category",

    initialState,

    reducers: {

        setActiveCategory: (_, action) => action.payload,

    },

});

export const { setActiveCategory } = categoriesSlice.actions;

export default categoriesSlice.reducer;  // 기본적으로 리듀서만 내보내기

 

마지막에 export default로 리듀서 내보내준것을 이용해서 스토어 생성할때 등록해준다.

• createSlice를 통해 categoriesSlice가 만들어진다.
• 이 슬라이스는 카테고리 상태와 해당 상태를 변경하는 리듀서 setActiveCategory를 포함한다.
• setActiveCategory 리듀서는 Redux에서 상태를 업데이트할 때 사용되며, 새로 선택된 카테고리(action.payload)를 상태로 설정한다.

import { configureStore } from "@reduxjs/toolkit";

import userReducer from "./user/user.slice";

import categoriesReducer from "./categories/categories.slice";

export const store = configureStore({

    reducer: {

        user: userReducer,          

        category: categoriesReducer,

    },

});

 

 

 2. UI 생성

import React from 'react'

import styles from "../category-tab/categoryTab.module.scss"

import { useDispatch, useSelector } from 'react-redux'

import { setActiveCategory } from '../../../../store/categories/categories.slice';

const CategoryTab = ({text,CategoryName}) => {

  const dispatch = useDispatch();

 

  //category를 리덕스로 가져오는데, store에 있는 값 가져올땐 useSelector

  const category =  useSelector((state) => state.category);

  console.log("현재 클릭한 탭 : ", category);

 

  const getActiveCategory=() =>{

    dispatch(setActiveCategory(CategoryName))

  }

 

  return (

    <button

    className={CategoryName === category

        ? styles.active_category: styles.category_button

    }

    💥 onClick={getActiveCategory} 

>

    {text}

</button>

  )

}

export default CategoryTab

 

2-1. 카테고리 상태와 액션을 사용하는 CategoryTab

 

• CategoryTab 컴포넌트는 각 카테고리 필터 버튼을 렌더링하고, 버튼 클릭 시 카테고리를 업데이트하는 역할
• useSelector를 통해 현재 선택된 카테고리를 Redux 상태에서 가져온다.
• 여기서 state.category는 store의 category 상태를 참조하며, 현재 활성 카테고리 값을 담고 있습니다.

 

const getActiveCategory=() =>{

    dispatch(setActiveCategory(CategoryName))

  }

 

• dispatch를 사용해 setActiveCategory 액션을 호출하고,
• 클릭된 CategoryName을 dispatch하여 Redux 상태에 업데이트

2-2. FiltersCategory에서 여러 CategoryTab 컴포넌트 렌더링

import React from 'react'

import styles from '../filters-category/FiltersCategory.module.scss'

import CategoryTab from './category-tab/CategoryTab'

import { CategoriesName } from '../../../store/categories/categories.type'

const FiltersCategory = () => {

  return (

    <div className={styles.filter_category}>

        <CategoryTab text={"모두"} CategoryName={CategoriesName.All}/>

        <CategoryTab text={"전자기기"} CategoryName={CategoriesName.Electronics}/>

        <CategoryTab text={"쥬얼리"} CategoryName={CategoriesName.Jewelry}/>

        <CategoryTab text={"남성의류"} CategoryName={CategoriesName.MensClothing}/>

        <CategoryTab text={"여성의류"} CategoryName={CategoriesName.WomensClothing}/>

    </div>

  )

}

export default FiltersCategory

• 각 CategoryTab에 CategoryName과 text를 전달
• CategoryName은 Redux 상태와 비교할 때 사용되고, text는 버튼에 표시.

 

hook 생성

const dispatch = useDispatch();

//category를 리덕스로 가져오는데, store에 있는거 가져올땐 useSelector

const category =  useSelector((state) => state.category);

 

CategoryTab에서 이부분들은 

타입스크립트 사용할때 다 타입에 넣어줘야한다

그럼 마이그레이션할때 복잡해지는데

 

hooks는 항상 이름 use로 시작한다.

import { useDispatch, useSelector } from "react-redux";

export const useAppDispatch =() => useDispatch();

export const useAppSelector =  useSelector;

 

요로케 바꿔주고 외부에서 쓸수 있도록 export 해준다.

그러면 아래처럼 hook에서 가져온걸로 바꿔준다.

  const dispatch = useAppDispatch();

  //category를 리덕스로 가져오는데, store에 있는거 가져올땐 useSelector

  const category =  useAppSelector((state) => state.category);

 

 

나아아아중에 Typescript로 바꿀때 아래와같이 바꿔줄것이다 ~!~~