라우터란?

라우터는 path 속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정할 수 있습니다. 또한, 브라우저 이동 없이 컴포넌트만 전환하여 마치 모바일 앱처럼 이루어지게끔 해줍니다.

라우터에 내장된 컴포넌트 종류

BrowserRouter

URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해줍니다.

Switch

Route로 생성된 자식 컴포넌트 중 매칭되는 첫 번째 Route를 렌더링 해줍니다. 보톤 메인 Route의 url 경로를 '/'로 지정하고 다른 Route에는 '/detail', '/login' 이런 식으로 지정하게 되는데, 만약 Switch를 사용하지 않으면 그냥 메인 페이지에 가기 위하여 '/'경로를 접속했는데 '/'가 포함된 '/detail', '/login'컴포넌트들이 다 렌더링 되는 경우가 생깁니다.

Route

컴포넌트에 path 속성을 이용하여 원하는 url를 지정합니다. 그 url에 접속하면 해당 컴포넌트만 렌더링이 됩니다. 즉, 사용자의 경로에 따라 다른 컴포넌트를 보여줄 수 있습니다.

Link

'a'태그와 비슷한 개념입니다. 지정한 url로 이동이 되게끔 해줍니다. 페이지를 새로 불러오기 때문에, 기존 컴포넌트에서 들고 있던 상태값들이 날라가게 됩니다.