Header: Tabs, Tab value invalid

탭에 해당하는 아이콘을 불러오기 위해 탭 목록에 해당하는 list를 변경.
현재 주소가 /home일 떄 해당하는 Tab의 value를 찾을 수 없는데, index => key를 사용하는 방식으로 바꾼 후 value 값에 대한 에러가 발생한지 의문
```
// 기존 코드
const lists = ['home', 'about', 'skills', 'project', 'contact'];
```

return ( <Header $scroll={scroll}>

Girang's

  <Tabs
    value={currentPath.pathname !== '/' ? currentPath.pathname : '/home'}
    sx={{ '& .MuiTabs-indicator': { backgroundColor: 'transparent' } }}>
    {lists.map(list => (
      <TabList
        key={list}
        label={list.replace('/', '')}
        value={'/' + list}
        to={list}
        component={Link}
        onClick={() => scrollToPage(list)}
      />
    ))}
  </Tabs>
</Header>

);

```jsx
// 변경 후
const lists = {
  home: <HomeIcon></HomeIcon>,
  about: <PersonIcon></PersonIcon>,
  skills: <ArticleIcon></ArticleIcon>,
  project: <AutoAwesomeMosaicIcon></AutoAwesomeMosaicIcon>,
  contact: <ConnectWithoutContactIcon></ConnectWithoutContactIcon>,
};

return (
    <Header $scroll={scroll}>
      <Logo variant="h1" onClick={scrollToTop}>
        Girang's
      </Logo>
      <Tabs value={currentPath.pathname !== '/' ? currentPath.pathname : '/home'} sx={{ '& .MuiTabs-indicator': { backgroundColor: 'transparent' } }}>
        {Object.entries(lists).map(([key, value]) => (
          <TabListWithIcons key={key}>
            {value}
            <TabList label={key} value={'/' + key} to={'/' + key} component={Link} onClick={() => scrollToPage(key)} />
          </TabListWithIcons>
        ))}
      </Tabs>
    </Header>
  );

Mui의 Tabs 안에 Tab을 다른 요소로 감싸서 사용할 경우 Tab의 value를 인식하지 못함

사용하고 싶은 요소를 label에서 직접 사용하는 방법


const listsLabel: { [key: string]: string } = {
home: '홈',
about: '소개',
skills: '기술',
project: '프로젝트',
contact: '연락망',
};

const listsIcon: { [key: string]: ReactNode } = { 홈: , 소개: , 기술: , 프로젝트: , 연락망: , };

// 주소 목록 const lists = ['home', 'about', 'skills', 'project', 'contact'];

return ( <Header $scroll={scroll}>

Girang's

  <Tabs
    value={currentPath.pathname !== '/' ? currentPath.pathname : '/home'}
    sx={{ '& .MuiTabs-indicator': { backgroundColor: 'transparent' } }}>
    {lists.map(list => (
      <TabList
        key={list}
        label={
          <TabListWithIcons activeUrl={list === currentPath.pathname.replace('/', '')}>
            {listsIcon[listsLabel[list]]}
            <div className="labelKor">{listsLabel[list]}</div>
          </TabListWithIcons>
        }
        value={'/' + list}
        to={list}
        component={Link}
        onClick={() => scrollToPage(list)}
      />
    ))}
  </Tabs>
</Header>

);

choigirang / portfolio

Header: Tabs, Tab value invalid #11