[새싹 프론트앤드] react 메뉴 클릭 시 글자 색 변경 유지하기(NavLink)

NavLink

react router에서 지원하는 기능 중 하나로 Link 컴포넌트처럼 페이지 이동이 가능하며

차이점은 특정링크에 스타일을 넣어 줄 수 있다는 것이다.

 

NavLink는 자체적으로 isActive라는 boolean값을 가지고 있는데

활성화시키고싶은 스타일에 css를 설정하고, 활성화(클릭) 될 때 해당 요소에 적용시킬 수 있다.

 

아래는 NavLink를 이용해 메뉴를 클릭하면 글자 색상이 변경되면서 그 색을 유지하도록 만든 것이다.

import React from "react";
import { NavLink } from "react-router-dom";
import "../style/Menu.scss";

const Menu = () => {
  const activeStyle = {
    color: "#6392ff",
  };

  return (
    <div className="menu">
      <NavLink
        className="link"
        style={({ isActive }) => (isActive ? activeStyle : {})}
        to="/">
        메인
      </NavLink>

      <NavLink
        className="link"
        style={({ isActive }) => (isActive ? activeStyle : {})}
        to="/healthadd">
        건강기록
      </NavLink>

      <NavLink
        className="link"
        style={({ isActive }) => (isActive ? activeStyle : {})}
        to="/healthlist">
        기록관리
      </NavLink>
    </div>
  );
};

export default Menu;

1. 먼저 NavLink를 import 해준다.

import { NavLink } from "react-router-dom";

 

2. 활성화 시 스타일을 지정한다. 나는 클릭 시 글자색이 변경되도록 설정했다.

  const activeStyle = {

    color: "#6392ff",

  };

 

3. NavLink태그에 스타일을 지정해주는데 isActive를 인자로 가지는 콜백함수를 넣고 isActive가 true라면 activeStyle을 적용하는 삼항연산자를 만들어준다.

style={({ isActive }) => (isActive ? activeStyle : {})}

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 13주차 블로그 포스팅