#13, React Router Dom ( BrowserRouter , HashRouter, Switch, Route )

React-Router-Dom 이란 ? 🧐

리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 

 

 

 

React-Router-Dom 사용하기 😉

BrowserRouter

1. Link 컴포넌트를 to 속성에 이동할 경로를 작성한다.

2. Route 컴포넌트 path속성을 Link의 to 속성과 매핑 component에 컴포넌트 경로 기술

3. 새로고침을 하면 경로를 찾지 못하여 에러가 발생한다. ( 주소를 사용하여 페이지를 찾아가도 에러 발생 )

-> 이를 해결하기 위해서는 서버에 추가적인 세팅이 필요하다.

-> 페이지의 유무를 서버에 알려줘야 하며, 서버 세팅 시 검색엔진에 신경써야한다.

4. 대부분 레거시 브라우저 (IE9 이하)에서는 사용 할 수 없다.

5. History API를 사용해야 한다.

6. 동적인 페이지에 적합하다. 

 

HashRouter

1. 주소에 해쉬(#)가 붙는다.

2. 새로고침을 해도 에러가 발생하지 않는다.

3. 검색 엔진 (SEO)가 읽지 못한다. ( 치명적이라 대부분 사용하지 않는다. )

4. history를 지원하지 않는다.

5. github pages에서 설정하기 간편하다. ( 배포가 간편하다. )

6. 정적인 페이지에 적합하다.

 

Route

요청받은 pathname에 해당하는 컴포넌트를 랜더링한다.

 

Switch

path의 충돌이 일어나지 않게 <Route>들을 관리한다.

<Switch> 내부에 <Route>를 넣으면 요청에 의해 매칭되는 <Route>들이 다수 있을 때, 제일 처음 매칭되는 <Route>만 선별하여 실행하기 때문에 충돌 오류를 방지해주며, 이동 시 발생 할 수 있는 충돌도 막아준다.

 

 

 

결론은? 🥲

지금까지 간편하다는 이유로 리액트 프로젝트를 만들 때 HashRouter를 사용했었는데, 최근 SEO의 중요성을 깨닫게 되어서 앞으로는 BrowserRouter만 사용하기로 다짐하고 또 다짐했다 !