TIF&TIL : 05OCT21

하나의 코드를 만드는데 방법은 참 여러가지가 있다.
물론 점점 더 디벨롭해가는 과정이겠지만
어떤 방식을 쓰냐에 따라 아예 다른 코드처럼 새롭게 느껴졌다.
어떻게 하나의 컴포넌트를 이렇게 다양한 방법으로 만들 수 있는지 그 경우의 수를 바로바로 설명해주시고 작성하시는 모습을 보며 다시 한 번 대단하다고 생각했다.

예로 navigation과 같이 동일한 모양의 타이틀이 다른 메뉴들이 나열된 부분이 있다.

이를 해결하기 위해서는

1. props로 세부 내용을 받을 수 있도록 지정하여 구현한다.

interface IItemProps {
  title: string,
  icon: any,
  key: string
}

const NavItem = ({
  title,
  icon,
  key
}: IItemProps) => (
  <Button type='text'>
    <img src={icon} alt={key} />
    <span>{title}</span>
  </Button>
)
...

<NavItem title='title' icon={iconImg} key='key' />

...

2. 세부 내용을 배열로 만들어 map을 이용해 반복한다.

type TMenu = {
  key: string
  title: string;
  icon: string;
}

const MENU: TMenu[] = [
  {
    key: 'key1',
    title: 'titl1',
    icon: iconImg1
  },
  {
    key: 'key2',
    title: 'titl2',
    icon: iconImg2
  },
  ...
 ]
  
 function NavWrapper() {
  return (
    <Sider className='navStyle' width='183px'>
      {MENU.map((item) => {
        const {
          key,
          title,
          icon
        } = item
        return (
          <NavItem
            title={title}
            icon={icon}
            key={`nav-item-${key}`}
          />
        )
      })}
    </Sider>
  )
}

☝🏻 1보단 2가 조금 더 권장하고 디벨롭된 느낌!

• 상세 내용을 배열로 관리하면서 데이터가 많아질 경우 별도의 파일로 만들어 관리하기에도 쉽고 다른 개발자가 코드를 봤을 때 조금 더 빠르게 파악할 수 있기 때문에!