NavLink?

프로젝트 하다가 <Link> 클릭 시 계속 활성화 되어있는 스타일 어떻게 주지... 하다가 찾은 <NavLink> !!!

react-router-dom 감사하다~

<Link>에 스타일 주고 싶을 때 유용하대서 쓸라 했는데 예전 버전 글 주르륵 있어서 activeClassName 속성은 오류나고 최신 글 찾으면 React + TypeScript에선 어케 쓰는지 안나와있어서 좀 애먹음

(이거 하나 만들겠다고...)

이것저것 찾아본다고 애먹었는데 그냥 스타일 상수로 선언해주고
style={({isActive) => {return isActive ? "활성화일 때 스타일" : "아닐 때 스타일"}} 하면 끝임...

자꾸 오류나서 함수 선언에 뭐 넣어야되나? 이래저래 styled-component에 클래스 먹이고 다해봤는데 다 어림없음 ㅋㅋ

나처럼 애먹을 주니어가 언젠간 보겠지라는 마음으로...

const Nav = () => {
  const deactiveStyle = {
    fontFamily: "var(--font--Medium)",
    color: "var(--gray500-color)",
  };
  const activeStyle = {
    fontFamily: "var(--font--Bold)",
    color: "var(--Black-color)",
  };

  return (
    <nav>
      <Ul>
        <li>
          <NavLink
            to="/search"
            style={({ isActive }) => {
              return isActive ? activeStyle : deactiveStyle;
            }}
          >
            Bar 검색
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/subscribe"
            style={({ isActive }) => {
              return isActive ? activeStyle : deactiveStyle;
            }}
          >
            구독하기
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/myCoupon"
            style={({ isActive }) => {
              return isActive ? activeStyle : deactiveStyle;
            }}
          >
            내 쿠폰함
          </NavLink>
        </li>
      </Ul>
    </nav>
  );
};

아마 <li> 부분 map으로 돌리면 코드 더 줄어서 좋을 것 같다.
리팩토링 Pick!

이게 좋은게 활성화 스타일 계속 유지해주는거 뿐만 아니라 알아서 다른거 누르면 활성화 되있던거 비활성화로 바꿔주기도 함

아 글구 기본적으로 쟤네한테 공통으로 맥일 스타일은 styled-component에 같이 넣어두면 된다!

그럼 바2