8일차 React Router DOM(04장) - 생활코딩! React 리액트 프로그래밍

04 Link

 

Link는 URI path 라우팅을 서버에 다녀오지 않고 리액트앱 자체에서 소화하는 기능을 제공하는 컴포넌트이다. 아래처럼 <a> 태그를 이용하면 무조건 서버를 다녀 온다. 즉, 페이지 reload가 일어난다.

<a href="/projects">Projects</a>

<a> 태그가 서버를 다녀오지 않으려면 교재 앞 부분에 나와 있던 event의 기본 동작을 비활성화하는 함수 preventDefault()를 호출하고 등록된 컴포넌트를 실행해주는 코드를 넣어야 한다.

 

이런 귀찮은 점을 해결해 주는게 바로 Link 컴포넌트. 아래와 같이 바꿔쓰면 된다.

<Link to="/projects">Projects</Link>

<a> 태그와 Link 컴포넌트의 차이점을 리액트앱이 실제 렌더링된 후 모습에 있다.

위와 같이 <a> 태그로 변환이 되고 data-discover라는 속성이 추가되어있다. 이에 관해 GPT랑 이야기해보니, click에 대한 global event handler를 리액트 프레임워크가 등록해놓고 저런 속성 유무에 따라 브라우저에게 기본동작을 맡길지 프레임워크가 처리할지를 결정하는 것으로 보인다.

 

추가로 NavLink라는 컴포넌트가 있다. Link와 다른 점은 내가 어떤 링크를 클릭했는지 알 수 있다는 점이다. NavLink를 이용한 후 렌더링된 코드를 보면

class 속성이 추가되어 있다. 그리고, About을 클릭해보면 

class에 'active'가 추가된 것을 볼 수 있다. 이 기능을 활용하면 UI/UX적으로 편리한 코딩이 가능할 것으로 보인다.

 

---

챕터 중간에 HashRouter라는 컴포넌트의 설명이 있었다. 이 라우터는 URI의 host와 path 사이에 해쉬(#)를 넣는 기법을 사용한다. #은 웹브라우저에서 북마크를 뜻하고, URI에서 # 앞 부분이 바뀌지 않으면 웹브라우저는 서버를 다녀오지 않고 이미 로딩한 페이지를 가지고 rerendering을 한다. 앞서 내가 웹서버가 SPA를 지원하기 위해서는 전용 설정이 있어야 한다고 이야기했었다. 이 해쉬라우터는 그 설정이 전혀 필요하지 않다. 즉 어떤 웹서버를 가지고도 SPA 서비스가 가능하다는 뜻이다.

하지만, 현재 구글 검색이 되는 웬만한 SPA 웹페이지들은 HashRouter를 안쓴다고 봐도 된다. 현대적인 웹호스팅 서비스들은 SPA를 지원하는데 전혀 어려움이 없기 때문이다. 본인 역시 꽤 규모있는 웹프로젝트를 진행했는데, HashRouter의 존재조차도 몰랐다. 웹서버 문제가 있었다면 FE개발팀원과 논의를 했을텐데 당연하게 BrowserRouter를 썼던 것 같다. 그렇다고 해서 HashRouter가 쓸모가 없냐하면 절대 그렇지 않으므로 알아두면 좋을 것이다.