useLocation

리팩토링 전 사용하던 방법은

 const [activeMenu, setActiveMenu] = useState('/seller/mypage'); // 초기값으로 '/mypage'를 설정

  // 클릭된 요소의 데이터 속성을 통해 활성화된 메뉴 항목을 식별하고 상태 업데이트
  const handleMenuClick = (e) => {
    const targetMenu = e.target.attributes.href.nodeValue;
    if (targetMenu) {
      (function (targetMenu) {
        setActiveMenu(targetMenu);
      })(targetMenu);
    }
  };

  <ul className="menu-list" onClick={handleMenuClick}>
     <li className={`menu-item ${activeMenu == '/seller/mypage' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage">상품 목록 조회</Link>
     </li>
     <li className={`menu-item ${activeMenu == '/seller/mypage/upload' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/upload">상품 등록</Link>
     </li>
     <li className={`menu-item ${activeMenu == '/seller/mypage/orderlist' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/orderlist">주문 내역 조회</Link>
     </li>
     <li className={`menu-item ${activeMenu == '/seller/mypage/wishlist' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/wishlist">위시리스트</Link>
     </li>
     <li className={`menu-item ${activeMenu == '/seller/mypage/sellerinfo' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/sellerinfo">회원 정보</Link>
     </li>
   </ul>

이벤트 위임 방법을 사용했는데 문제는 기본값이 useState로 지정되어있어 뒤로가기를 눌렀을때 기본값으로 활성화 되거나 수정 컴포넌트로 넘어간뒤 페이지를 다시 리로드하면 랜더링된 컴포넌트와 활성화된 메뉴가 맞지않는 오류가 발생 했는데 아래와 같은 방법으로 리팩토링후 이러한 문제점을 보완하였다.

 const url = useLocation().pathname;

  <ul className="menu-list">
     <li className={`menu-item ${url == '/seller/mypage' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage">상품 목록 조회</Link>
     </li>
     <li className={`menu-item ${url == '/seller/mypage/upload' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/upload">상품 등록</Link>
     </li>
     <li className={`menu-item ${url == '/seller/mypage/orderlist' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/orderlist">주문 내역 조회</Link>
     </li>
     <li className={`menu-item ${url == '/seller/mypage/wishlist' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/wishlist">위시리스트</Link>
     </li>
     <li className={`menu-item ${url == '/seller/mypage/sellerinfo' ? 'is_active' : ''}`}>
       <Link to="/seller/mypage/sellerinfo">회원 정보</Link>
     </li>
   </ul>

useLocation을 사용하여 해당 url일때 메뉴가 활성화될수있게 만들었다.

같은 url을 가져오는거 같은데 왜 이벤트 위임은 안되는거고 useLocation 되는지 찾아본 결과

e.target.attributes.href.nodeValue 는 이벤트 핸들러 내에서 DOM 요소의 특정 속성 값을 가져오는 데 사용되고, useLocation().pathname은 React 애플리케이션에서 현재 경로를 관리하고 사용할 때 사용됩니다.

두가지 방법 둘다 사용할수있지만, 첫번째 방법같은 경우는 뒤로가기 했을 시 기본값으로 설정되어있는 값 때문에 뒤로가기했던 시점인 정확한 위치의 대한 값이 전달되지않는다.

어쨋든...일반적으로 url에 대한 값을 사용할때는 useLocation을 많이 사용한다고 하니 기억해두자.