[React] GNB 현재 위치 표시

▶︎ 목표

현재 사용자가 어느 페이지에 있는지 표시하기 위해 페이지 이동 할 때마다 GNB color 변경

🧗🏻‍♀️ 시행착오

페이지 이동은 Link로, color 변경은 onClick 으로 단순하게 생각했었다.
페이지에 머무르는 동안에는 GNB color를 유지해야 하고, 페이지 이동 할 때마다 color가 변경되어야 하니 useState로 color 값을 관리하려고 생각했다.

  const [tab, setTab] = useState(1);

        <Link to="/" onClick={() => setTab(1)}>
          { tab === 1 ? <Home /> : <Home2 /> }
        </Link>
  // onClick 으로 tab의 값에 따라 아이콘, 페이지이름, className이 변경되도록 했다.

페이지 이동하면서 컬러도 바뀌지만 onClick 할 때 tab의 값이 console.log에 찍히는 것처럼 한박자씩 늦어지면서 두번 클릭을 해야 color값이 바뀌는 에러가 생기는 것이다.

아무래도 default 값이 1이여서 상태값이 렌더될 때 한번씩 1을 찍고 오는 건가 싶어서 useEffect로도 값이 바뀔 때마다 color 값이 바뀌도록 해보기도 했었지만 결과는 똑같았고, onClick과 Link가 함께 적용이 안되는 건가 싶어서 Link를 div로 감싸 div에 onClick 을 주었지만 color 만 바뀌고, 페이지 이동이 안되는 것이었다...

결국 스택오브플로우에 글을 올렸고, 또 한 분의 천사께서 color 변경은 path 변경 시 바뀌도록 하는 정말 큰 도움을 주셨다.!
그래서 useLocation의 pathname을 통해 color 값이 바뀌도록 했고, 페이지 이동은 그대로 Link를 통해 이뤄지도록 했다.!

💡 해결

🔺 useLocation().pathname 적용

onClick 과 useState는 불필요한 코드였다.!

  const pathName = useLocation().pathname;

        <Link to="/" >
          {pathName === '/' ? <Home /> : <Home2 /> }
        </Link>

진짜 너무 감격스러웠다ㅠㅠㅠㅠ..
지금도 해야할 것들이 많지만 이렇게 한 개씩 해치워나갈 때마다 너무너무 뿌듯하다.!!