[React] 리액트에서 네비게이션 바 active tintcolor 적용하기 (react-router-dom)

activetint

웹사이트를 보면 상단에 네비게이션 바가 위치하고 있다.
이 때 현재 페이지의 위치에 따라 네비게이션 메뉴의 색상이 바뀌는것을 active tintcolor 라고 한다.
예를들어, 다음과 같은 경우이다.

react-router-dom

react-router-dom을 이용하면 이 작업을 쉽게 해줄 수 있다.
React에서는 새로고침을 하지 않기 위해 링크를 걸 때 a 태그를 사용하지 않는다.
대신 react-router-dom에 있는 Link 컴포넌트를 사용한다.

<Link to="/">홈</Link>

NavLink

active tintcolor를 적용하기 위해서는 Link 컴포넌트가 아닌 NavLink 컴포넌트를 사용하면 된다.
사용방법은 Link 컴포넌트와 비슷하다. (자세한 내용은 여기에)
activeClassName 속성으로 class이름을 전달하면 현재 내 path가 NavLink에 지정한 path와 일치할 때 해당 class이름의 CSS를 적용하게 된다.

<NavLink to='/' activeclassname='active'>홈</NavLink>

이제 CSS파일을 다음과 같이 적용하면 현재 페이지가 active상태일 때 CSS가 적용될 것이다.

//App.css

.active{
    color : blue;
}