react classnames 사용하기

react에서 classnames사용하기

헤더 메뉴들에서 isActive클래스를 줄때 기존에는

<NavItem className={location.pathname === '/' ? 'isActive' : ''}>홈</NavItem>

props에서 location을 받아와서 url이름으로 참 거짓 구분해서 isActive클래스를 주었다

여기서 classnames를 사용하면

<NavItem className={cn({isActive: location.pathname === '/'})}>홈</NavItem>
  • isActive가 참 일때 클래스가 추가된다
  • 참 거짓으로 쓰던 코드가 classnames를 사용해서 훨씬 깔끔해졌다
  • 조건을 달아서 사용할때 너무 편하다

좋은 웹페이지 즐겨찾기