[react-router-dom] Link, NavLink 차이점 정리, 리액트 라우터
반응형
[react-router-dom] Link와 NavLink 차이점 정리, 리액트 라우터
react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다.
정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다.
공통점과 차이점
Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔 url로 이동하는 기능을 한다는 점에서 동일합니다.
공식문서에서는 NavLink에 관해 아래와 같이 정의되어 있습니다.
NavLink 는 Link의 특별한 버전입니다.
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됩니다.
Nav 활용 예시
예를 들어 네비 메뉴에 여러 링크 메뉴가 있고, 현재 활성화된 메뉴에 다른 css를 적용하고 싶을 때
위 예제처럼 Link 컴포넌트로 작업할 경우,
현재 URL과 해당 링크로 이동할 URL을 비교하여, 클래스를 추가 혹은 삭제 해주는 별도 처리가 필요합니다.
(저는 classnames 모듈을 이용하여 조건에 따라 다른 className을 추가하는 형식으로 style을 분기 처리 하였습니다.)
NavLink 활용 예시
NavLink 컴포넌트를 사용할 경우, 별도로 URL 비교처리 없이 activeClassName 속성을 이용하여 작업하였습니다.
앞선 Nav 컴포넌틀 이용한 경우보다 간편하게 처리가 가능합니다. activeClassName 외에도 다음 속성도 사용할 수 있습니다.
activeStyle: object
isActive: func
참고
반응형
'프로그래밍 > React' 카테고리의 다른 글
| [React] Forwarding Refs 로 refs 전달하기 (0) | 2021.10.13 |
|---|---|
| [React] React.createRef() 에 대한 정리 (0) | 2021.10.13 |