[Next js] 중복코드개선, 무한루프

카페모아 프로젝트에서 반복되는 코드와 전역으로 관리해야할 필요성을 느낀점을 기록화하였다.

1. 카테고리별 필터링된 리스트 목록화

🔎 문제점
필터링된 리스트를 목록화하는건 카테고리/지역/메인배너/추천리스트 등에 모두 같은 동작으로 중복코드가 다수 발생한다.

✅ 해결
전역함수로 인자만 전달하는 방식으로 전환했을때 중복코드를 개선할 수 있었다.

//utils.jsx

//전체데이터에서 전달받은 필터값을 가진 포스트만 추려서 list에 출력
export const cateListHandle = (cate, articleAllData, setCateInLists, navigate, filterText) => {
  const filterCateInList = articleAllData.filter(list => list[filterText] === cate);
  setCateInLists(filterCateInList);
  const cateInListsParam = encodeURIComponent(JSON.stringify(filterCateInList));
  navigate(`/list-category?cate=${cate}&cateInLists=${cateInListsParam}`);
};

• 호출했을때 실행할 함수 유틸페이지에 빼주기
  • cate = 검색카테고리
  • articleAllData = 모든 article데이터
  • setCateInLists = 필터링된리스트
  • filterText = 필터링한 데이터키값

//MainCategory.jsx(AF)

import { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { cateListHandle } from '../utils/utils';

const category = ['모각코', '뷰맛집', '24시', '디저트맛집', '애견동반', '한옥', '분좋카'];

const MainCategory = () => {
  const [articleAllData, setArticleAllData] = useState([]); //article 전체데이터 상태저장
  const setCateInLists = []; //필터링된 리스트 저장
  const filterText = 'category'; //필터링된 리스트 저장
  const navigate = useNavigate();

  //article 데이터 전체 가져오기
  useEffect(() => {
    const getArticle = async () => {
      const { data: articleData } = await axios.get('http://localhost:888/article');
      setArticleAllData(articleData);
    };
    getArticle();
  }, []);

  const onClickfilter = cate => {
    cateListHandle(cate, articleAllData, setCateInLists, navigate, filterText);
  };

  return (
    <div className="p-[20px] flex flex-col gap-[20px] max-w-[1500px] mx-auto">
      <h2>카테고리</h2>
      <ul className="flex gap-[10px] w-[100%] h-[300px]">
        {category.map((cate, index) => {
          return (
            <li key={index} className="w-[20%] cursor-pointer" onClick={() => onClickfilter(cate)}>
              <span className="flex w-[200px] h-[200px] rounded-[50%] bg-slate-400 items-center justify-center">
                {cate}
              </span>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

• import { cateListHandle } from '../utils/utils';
  -> util함수 임폴트하기
• li 클릭했을때 클릭함수에 cateListHandle 실행함수 호출하기
  • 인자로 클릭한 li의 텍스트, article전체데이터, 필터링상태관리, 필터링할 article의 키값 전달하기

---

2. 무한루프

🔎 문제점
메뉴가 열린상태로 페이지 이동시 계속 펼쳐져 있는 문제
상태변경과 페이지 이동이 같이 실행될 때 무한루프 문제

✅ 해결
Zustand 스토어에 메뉴별 active상태를 초기화하는 함수를 만들어
스토어를 임폴트하여 메뉴 초기화 함수를 불러온 후 필요한 이벤트 함수들에 같이 불러온다.

 // bearStore.js (Zustand)
 const initialState = {
  userInfo: null,
  isMenuOpen: false,
  activeTab: 0,
};
const useUserStore = create(
	persist(
    (set, get) => ({
      ...initialState,
      ...
			closeMenu: () => set({ isMenuOpen: false }),
			setActiveTab: index => set({ activeTab: index }),
			removeTab: () => set({ activeTab: false }),
		}),
	...
	)

• 메뉴가 있는 컴포넌트에
  const { closeMenu, toggleMenu, isMenuOpen} = useUserStore(); 로 메뉴초기화 함수를 불러온 후 메뉴가 닫혀야할 이동 및 클릭이벤트에 함수를 불러온다.

---

정리옮기기

노션정리 보기