interface를 이용한 nav만들기

회원일때와 비회원일때 nav바를 따로 만들고 싶을때 interface를 이용할 수 있다.

'js shop'이라는 쇼핑몰이라는 가정으로 해보자!

interface navType {
  label:string;
  href:string;
}

const notUserList: navType[] = [
  {label: 'about JS', href: "/about"},
  {label: "best상품", href: "/best"},
  {label: "리뷰", href: "/review"},
  {label: "로그인 / 회원가입", href: "/login"}
];

const userList: navType[] = [
  {label: 'about JS', href: "/about"},
  {label: "best상품", href: "/best"},
  {label: "리뷰", href: "/review"},
  {label: "마이페이지", href: "/mypage"},
];

이렇게 두 개의 배열을 만들어 주고

const navList = userId ? userList : notUserList;

user의 로그인 여부를 확인할 수 있는 조건에따라서 userList나, notUserList로 navList에 할당될 수 있도록 한다.

{navList.map(({label, href})=> (
           <Link href={href}>
             <a>
              <div>{label}</div>
             </a>
           </Link>
           ))}

navList 배열에 map을 사용해주면 상황에 따른 nav를 만들 수 있다.