이젠, Nav바 만들때 NavLink를 쓰자 - active일 때 CSS스타일링하기

홈페이지 하단에 네비바를 만들어야 했다.

네비 바를 만드는것 까지는 어렵지 않았으나, 해당 카테고리가 선택되었을 때 이미지 변경 & 글의 color변경하는 방법을 모르겠더라.

 

location.pathname에 따른 img src 변경

페이지는 항상 location의 정보를 받아올 수 있는데, 콘솔에서 window.location을 찍어보면 확인할 수 있다.

참고로 window는 생략 가능하다.

이 pathname을 활용해서 이미지 src를 바꿔주는 방법을 택했다.

 

location.pathname이 '/home'과 일치할 때 color 이미지로 변경, 그렇지 않은경우 흑백이미지로 두었다.

/search로 이동했을 때 채팅 이미지 색깔이 잘 바뀐 모습

 

NavLink styling하는 방법

여기서 중요한건 저 글씨색깔이었다. 리액트는 처음이다보니 자바스크립트처럼 간편하게 active상태일 때 스타일링을 주는 방법이 안되어 다른 방법을 모색해야 했다. 다른 동료들을 보니 current속성을 일부러 추가해 준 다음 그 속성과 일치할 때 스타일링을 지정해주는 방법을 쓰기도 했는데 뭔가,, 리액트가 네비바 스타일링을 위한 기능을 만들어놨을 것 같다는 생각에 좀 더 찾아봄. 

 

그러다가 Nav바를 처음 만들 때 Link와 NavLink의 차이점을 찾아봤던 게 생각이 났고, NavLink가 바로 내가 찾던 그자식임을 떠올렸다!

 

NavLink란?

Link의 특별한 버전으로, 현재의 url과 랜더링된 element가 일치할 때 (쉽게말해 해당 페이지가 클릭된 active 상태일 때) 스타일링 속성을 넣어줄 수 있다.

 

className에 isActive 파라미터 전달하기

NavLink의 className에 함수를 넣어주는데, 이 때 파라미터로 isActive 속성을 전달해주면 active상태일 때와 아닐때를 삼항연산자로 className을 달아줄 수 있다!

className에 isActive 속성 넘겨주기

이후 active일때 스타일링 달아주기

이 얼마나 간편한가!!!

 

 

(참고)activeClassName이라는 속성을 사용해서 active일 때의 className을 바로 사용하는 방법도 있지만 react v6부터는 사용하지 말라고 한다.

https://v5.reactrouter.com/web/api/NavLink

 

 

style속성에 Active파라미터로 전달하기 

style속성으로 함수를 넣어줄 때, 역시 파라미터로 isActive를 사용해서 active상태일 때와 아닐때를 이용해서 스타일속성을 넣어줄 수도 있다.

<NavLink
  to="/faq"
  style={isActive => ({
    color: isActive ? "green" : "blue"
  })}
>
  FAQs
</NavLink>

 

(참고) activeStyle을 사용해서 active일 때의 style을 지정해주는 방법은 리액트 v6에서는 사용하지 않는다고 한다.

결론

몰라서 고생했다. 알고나니 엄청 쉽다.

다만 현재는 img는 pathname을 통해 따로 관리하고있는걸 isActive속성을 사용해서 함께 관리해주고 싶은데 그럼 background이미지를 변경해주는 방향을 코드를 고쳐야 할 듯 하다. 이는 추후에 리팩토링때 합쳐보면 좋겠다.