[Next] 간단한 룩업테이블 리팩토링 실전 예시

리팩토링 전:

'use client'

import { ReactNode, useState } from 'react'
import ShopBoardTypeSelector from '@/components/Shops/ShopBoardTypeSelector'
import SimpleOrderBoard from '@/components/Shops/SimpleOrderBoard'
import GeneralOrderBoard from '@/components/Shops/GeneralOrderBoard'
import { MenuBoardType, Shop } from '@/components/Shops/interface'
import { Menu } from '@/components/Menus/interface'
import ShopMenuOrderButton from '@/components/Shops/ShopMenuOrderButton'

interface Props {
  shop: Shop
  menus: Menu[]
  uniqueCategories: string[]
}

export default function ShopMenuBoardContainer({ shop, menus, uniqueCategories }: Props) {
  const [selectedMenuBoardType, setSelectedMenuBoardType] = useState<MenuBoardType>(shop.menuBoardType)

  return (
    <div className="flex flex-col justify-center min-h-full pb-[60px]">
      {selectedMenuBoardType === 'SIMPLE_ORDER' && (
          <SimpleOrderBoard shop={shop} menus={menus} uniqueCategories={uniqueCategories} />
      )}
      {selectedMenuBoardType === 'GENERAL_ORDER' && (
          <GeneralOrderBoard shop={shop} menus={menus} uniqueCategories={uniqueCategories} />
      )}
      {selectedMenuBoardType === 'GUEST_SELECTION' && (
          <ShopBoardTypeSelector setSelectedMenuBoardType={setSelectedMenuBoardType} />
      )}
    </div>
  )
}

 

---

리팩토링 후:

'use client'

import { ReactNode, useState, useEffect } from 'react'
import ShopBoardTypeSelector from '@/components/Shops/ShopBoardTypeSelector'
import SimpleOrderBoard from '@/components/Shops/SimpleOrderBoard'
import GeneralOrderBoard from '@/components/Shops/GeneralOrderBoard'
import { MenuBoardType, Shop } from '@/components/Shops/interface'
import { Menu } from '@/components/Menus/interface'
import ShopMenuOrderButton from '@/components/Shops/ShopMenuOrderButton'

interface Props {
  shop: Shop
  menus: Menu[]
  uniqueCategories: string[]
}

export default function ShopMenuBoardContainer({ shop, menus, uniqueCategories }: Props) {
  const [selectedMenuBoardType, setSelectedMenuBoardType] = useState<MenuBoardType>(shop.menuBoardType)

  const orderBoardComponents: Record<MenuBoardType, ReactNode> = {
    SIMPLE_ORDER: <SimpleOrderBoard shop={shop} menus={menus} uniqueCategories={uniqueCategories} />,
    GENERAL_ORDER: <GeneralOrderBoard shop={shop} menus={menus} uniqueCategories={uniqueCategories} />,
    GUEST_SELECTION: <ShopBoardTypeSelector setSelectedMenuBoardType={setSelectedMenuBoardType} />,
  }

  return (
    <div className="flex flex-col justify-center min-h-full pb-[60px]">
      {orderBoardComponents[selectedMenuBoardType]}
    </div>
  )
}

 

 

전자도 나쁘진 않은데, 후자가 유지보수하기 좋아보인다.

(취향의 여지는 있어보임)

 

 

---

 

IDE로 보면 줄이 넘어가지 않아서 훨씬 깔끔해보인다.