header nav부분 분석

import styles from './headerNav.module.scss';

const NAV_ITEMS = [
  { title: '# BLOG', path: '/blog' },
  { title: '# COBB', path: '/owner-description' },
  { title: '# ABOUT', path: '/blog-description' },
];
// 객체 배열을 만들어 준걸로 보아 map함수를 쓰리라 짐작할 수 	있다. 재할당이 필요한 경우는 setState를 써서 깊은 복사를 할것 같다. spread 문법 참조.

* 여기서 IHandleProps가 어떤 타입을 의미하는지 잘 모르겠다. *
  
const HeaderNav = ({ handleCloseMenu }: IHandleProps) => {	// handleCloseMenu를 props로 던져서 IHandleProps 	타입으로 정의한다.
  const router = useRouter();	// 라우팅을 해야하니 정의

  const handleNavigateAndCloseMenu = (url: string) => {
    router.push(url);
    // router를 통해서 해당 url에 접근한다.
    handleCloseMenu();	
    // 메뉴 닫기
  };
	// list를 map함수로 순회한다음에 key값은 고유해야 하므로 		각각의 path로 지정하고 만일 li가 클릭될 시에 라우터에 해당 리스트의 path를 넘겨주고 이동하는 방식.   
  return (
    <nav className={styles.sidebarNavContainer}>
      <ul>
        {NAV_ITEMS.map((list) => (
          <li key={list.path}>
            <button
              type='button'
              onClick={() => {
                handleNavigateAndCloseMenu(list.path);
              }}
            >
              {list.title}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default HeaderNav;