20240726 Refatoring

RingKim1·2024년 7월 28일

TIL

목록 보기

62/77

Today

1. 알고리즘

20240726 알고리즘 코드 카타

2. 정리

[Editor] VScode Extension

3. 프로젝트

튜터님의 리뷰를 받고나서 코드 리팩터링이 필요하다

코드 리팩터링

가장 코드길이가 줄어든 컴포넌트 예시

"use client";

import React, { useState } from "react";
import Tab from "@/components/common/Tab";
import MyPageCarousel from "./MyPageCarousel";

const WishList: React.FC = () => {
const [activeTab, setActiveTab] = useState<string>("전체");

const handleTabClick = (tabName: string): void => {
setActiveTab(tabName);
};

return (
<section className="mb-5 ">
<div className="flex justify-start mb-5 px-2">
<Tab TapName="전체" isActive={activeTab === "전체"} onClick={() => handleTabClick("전체")} />
<Tab TapName="여행지" isActive={activeTab === "여행지"} onClick={() => handleTabClick("여행지")} />
<Tab TapName="숙소" isActive={activeTab === "숙소"} onClick={() => handleTabClick("숙소")} />
<Tab TapName="놀거리" isActive={activeTab === "놀거리"} onClick={() => handleTabClick("놀거리")} />
<Tab TapName="음식점" isActive={activeTab === "음식점"} onClick={() => handleTabClick("음식점")} />
<Tab
TapName="축제 및 행사"
isActive={activeTab === "축제 및 행사"}
onClick={() => handleTabClick("축제 및 행사")}
/>
</div>
<div className="h-[600px]">
{activeTab === "전체" && <MyPageCarousel carouselName="전체" />}
{activeTab === "여행지" && <MyPageCarousel carouselName="여행지" />}
{activeTab === "숙소" && <MyPageCarousel carouselName="숙소" />}
{activeTab === "놀거리" && <MyPageCarousel carouselName="놀거리" />}
{activeTab === "음식점" && <MyPageCarousel carouselName="음식점" />}
{activeTab === "축제 및 행사" && <MyPageCarousel carouselName="축제 및 행사" />}
</div>
</section>
);
};

export default WishList;

"use client";

import React, { useState } from "react";
import Tab from "@/components/common/Tab";
import MyPageCarousel from "./MyPageCarousel";

const tabs = ["전체", "여행지", "숙소", "놀거리", "음식점", "축제 및 행사"];

const WishList: React.FC = () => {
  const [activeTab, setActiveTab] = useState<string>("전체");

  return (
    <section className="mb-5">
      <div className="flex justify-start mb-5 px-2">
        {tabs.map((tab) => (
          <Tab key={tab} TapName={tab} isActive={activeTab === tab} onClick={() => setActiveTab(tab)} />
        ))}
      </div>
      <div className="h-[600px]">
        {tabs.map((tab) => activeTab === tab && <MyPageCarousel key={tab} carouselName={tab} />)}
      </div>
    </section>
  );
};

export default WishList;

스위치문 => 함수형태

  let contentType: number | undefined;

  switch (carouselName) {
    case "전체":
      contentType = undefined;
      break;
    case "여행지":
      contentType = 12;
      break;
    case "액티비티":
      contentType = 28;
      break;
    case "숙박":
      contentType = 32;
      break;
    case "음식점":
      contentType = 39;
      break;
    default:
      contentType = undefined;
  }

  const getCarouselType = (name: string): number | undefined => {
    const contentTypeMap: { [key: string]: number | undefined } = {
      전체: undefined,
      여행지: 12,
      숙소: 32,
      놀거리: 28,
      음식점: 39,
      "축제 및 행사": 15,
    };