[TIL] 객체 맵핑을 통한 탭 메뉴 구현

스타일드 컴포넌트를 이용하여 탭메뉴를 구현하는중
url의 변경사항을 감지하여 하위 컴포넌트를 렌더링해주는 방법을 적용해 보았다.

const MypageContents = () => {
  const location = useLocation();
  const url = location.pathname.split('/').pop();
  const currentTitle = TAB_LIST.find(item => item.url === url).title;

  return (
    <Container>
      <Aside>
        <TabMenu>
          {TAB_LIST.map(tab => (
            <Tab key={tab.id} to={tab.url}>
              {tab.title}
            </Tab>
          ))}
        </TabMenu>
      </Aside>
      <Contents>
        <Title title={currentTitle} />
        {TAB_MAPPING_OBJ[url]}
      </Contents>
    </Container>
  );
};

const Tab = styled(Link)`
  display: inline-block;
  padding: 28px 0;
  color: #333;
  border-top: 1px solid #d9d9d9;
  text-align: center;
  text-decoration: none;
`;

export const TAB_LIST = [
  { id: 0, url: '/mypage/like', title: '찜 목록' },
  { id: 1, url: '/mypage/sell', title: '판매 목록' },
  { id: 2, url: '/mypage/buy', title: '구매 내역' },
  { id: 3, url: '/mypage/reviews', title: '거래 후기' },
];

export const TAB_MAPPING_OBJ = {
  like: <List column={3} />,
  sell: <List column={3} selectOpt={true} />,
  buy: <List column={3} />,
  reviews: <ReviewList />,
};

탭 리스트가 map함수를 통과하며 스타일링된 Link컴포넌트의 to 속성으로 url 키값이 전달된다.
그 결과 아래와 같은 DOM 형태로 렌더링 되는데
styled-components -> JSX -> DOM Element로 변환되는 과정을 거치게 된다.

// JSX
<Link key=0 to='/mypage/like'>찜 목록</Link>
...

// DOMElement
<a key=0 href='/mypage/like'>찜 목록</a>
...

여기에서 컴포넌트가 렌더링 됨에 따라 상단에 호출해준 url 변수가 계속해서 변경을 감지할 수 있게 되고

<Tab to='/mypage/like' /> Click
-> url 변경
-> 변경된 url 감지하여 맵핑된 객체의 value에 있는 컴포넌트 렌더링

의 과정을 거쳐 원하는 컴포넌트만 화면에 보여줄 수 있게 된다.