NavBar 버튼에 현재 페이지에 따른 스타일링 지정하기 ( 코드의 독립성과 유지보수의 편의성)

FAST FOX·2023년 5월 31일
0

DressCode개발일지

목록 보기
5/6
post-thumbnail

개요

우리가 어느 사이트에 들어가면 새로운 페이지로 이동하기 위한 NavBar를 흔히 볼 수 있다. 이러한 NavBar는 더 좋은 UX를 위해서 현재 페이지가 어느 페이지인지 알려주기 위해서 버튼의 스타일링에 차이를 준다.

나도 이런 효과를 주기 위해서 현재 url을 추출해서 해당 url과 내가 설정한 url이 같다면 CSS가 적용되는 방식을 사용했다.
하지만 당장에 port번호만 달라져도 css가 적용되지 않는 문제점이 발생했고 나는 이를 해결하기 위해서 새로운 방식을 생각했다.

문제 코드

const currentUrl = window.location.href;

기존에는 위와 같이 브라우저의 JS환경에서 window객체가 제공하는 속성을 사용해서 url을 추출하였다.

이후에는 active된 버튼과 아닌 버튼의 스타일을 외부에서 만들고 조건부에 따라서 적용하는 방식을 사용하였다.

해결 코드

문제 해결 방법을 찾던도중 알게된 방법은 react-router-dom 라이브러리의 useLocation() 메소드를 사용하는 것이다.

const location = useLocation();

이렇게 location을 선언해서 살펴보면

이렇게 생긴 객체를 얻을 수 있었다. 여기서 pathname이라는 속성이 내가 <Link>에서 to="/dressroom"라고 설정했던 경로이기 때문에 다음과 같이 설정하면 조건에 따른 스타일링이 가능했다.

<NavLink to="/dressroom" className={location.pathname === '/dressroom' ? 'active' : ''}>
	DressRoom
</NavLink>

코드 개선

하지만 이것도 결국에는 pathname의 문자열을 조건문에 직접적으로 기입했고 때문에 추후에 주소가 바뀌면 이 문자열을 추가 변경해주어야 하는 번거로움이 발생가히 때문에 그렇게 좋은 코드라고 생각이 들지 않았다.
그래서 내가 좀 더 알아본 결과 <NavLink>의 속성 중 activeclassName 이라는 속성이 있다는 것을 발견했다. 이를 활용하면 굳이 조건문에 따라서 className을 설정하지 않고 해당 NavLink가 활성화되면 활성화 상태에서의 CSS가 적용되도록 할 수 있었다.
그리고 이를 적용한 코드이다.

< JavaScript 코드 >

< CSS 코드 >

결과적으로 굳이 조건문에서 고정된 값을 주어야 하는 코드가 아닌 스스로 상태를 판단하여 스타일링하는 코드를 완성했다.

느낀점

내가 초반에 만들어둔 만들어둔 코드를 보면 코드의 독립성과 유지보수를 생각하지 않고 만들어둔 코드가 굉장히 많았다. 하지만 점점 컴포넌트의 수가 많아지고 각 컴포넌트간의 연결점이 많아질 수록 하나를 수정하면 수정의 수정이 또 필요한 경우가 종종 생겼다.
앞으로는 코드를 구현할 하나의 경우에 묶여있는 코드가 아닌 여러 상황에서 두루 작동할 수 있는 코드를 구현할 수 있도록 해야겠다. 기존의 코드도 다시 짜야겠지...

profile
준비하는 개발자

0개의 댓글