리액트일지001 | 리액트 메뉴바 클릭시 글자 색상 변경하기 | 변경하고 글자 색상 유지하기 | 리액트 NavLink

에러로그

 사이드 프로젝트로 쇼핑몰 구현 중에 아래 이미지와 같이 사이드 메뉴바 클릭시에 글자 색상과 굵기를 변경하고 해당 페이지에 머무를 때에 변경된 글자 스타일을 유지하게 구현하고 싶었다. 

나의 멋진 해결

 처음에는 useState를 사용하여 상태관리를 하려했는데 좀 더 간단하게 구현할 수는 없을까 찾아보다가 NavLink를 알게 되었다. NavLink는 현재 경로와 to 로 설정한 Link의 경로가 일치하는 경우 특정 스타일을 적용할 수 있는 컴포넌트이다.

 

 코드먼저

//MyPageMenu.tsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import * as S from './style';

export const MyPageMenu = () => {
  const activeStyle = {
    color: '#289951',
    fontWeight: 700,
  };
  return (
    <div>
      <S.Wrapper>
        <div>마이페이지</div>
        <ul>
          <li>
            <NavLink style={({ isActive }) => (isActive ? activeStyle : {})} to='/mypage'>
              내 정보
            </NavLink>
          </li>
          <li>
            <NavLink style={({ isActive }) => (isActive ? activeStyle : {})} to='/mypage-pw'>
              비밀번호 변경
            </NavLink>
          </li>
          <li>
            <Link to='/mypage-od'>주문내역</Link>
          </li>
          <li>
            <Link to='/mypage-wd'>회원 탈퇴</Link>
          </li>
        </ul>
      </S.Wrapper>
    </div>
  );
};

 

결과 화면

 효과를 주지않고 Link 태그로만 만든 주문내역에서는 글자 스타일의 변화가 없지만 NavLink에서는 글자 스타일이 변하고 유지되는 것을 확인할 수 있다.

내가 한 삽질

 리액트 v6에서는 이런식으로 작성하면되지만 이전 버전에서는 activeStyle을 사용하였었는데 변화된 것을 모르고 오류도 겪었다. 

 

 이렇게 activeStyle을 달고 타입 오류인줄 알고 한참 찾아봤다 ㅠㅠ  당연하다.. 이제는 activeStyle이 없기때문이다. 혹시라도 이 글을 본다면! activeStyle을 isActive로 수정해보자! 공식문서에서 activeStyle이 사라짐과 isActive를 사용해야하는 것을 확인하고 위와 같이 수정하였더니 잘 동작하였다. 아래 찾아봤던 공식문서 링크를 첨부한다.

https://reactrouter.com/en/main/components/nav-link

NavLink v6.4.3