리액트 라우터에는 여러 종류가 있습니다.
- createMemoryRouter
- createHashRouter
- createStaticRouter
- createBrowserRouter
https://reactrouter.com/en/main/routers/picking-a-router
공식 사이트에서는 다음과 같이 설명합니다.
모든 웹 프로젝트에서는 createBrowserRouter을 사용하는 것이 좋습니다.
표준화되기 전의 웹 앱에서 흔히 사용되는 해시 URL(#this/stuff) 대신 전체 URL을 사용합니다. history.pushState. 전체 URL은 SEO와 서버 렌더링에 더 좋으며 나머지 웹 플랫폼과도 더 잘 호환됩니다.
정적 파일 서버에서 앱을 호스팅하는 경우 404를 방지하려면 모든 요청을 index.html 보내도록 구성해야 합니다.< /span>
어떤 이유로 전체 URL을 사용할 수 없는 경우 createHashRouter가 차선책입니다.
데이터 API에 관심이 없으면 계속해서 사용할 수 있습니다
1. createMemoryRouter
브라우저의 기록을 사용하는 대신 메모리 라우터는 메모리에서 자체 기록 스택을 관리합니다.
공식 사이트에서 이렇게 알려주는데 무슨 말인지 몰라서 찾아봤습니다.
:브라우저 기록을 사용하는 라우터에서는 앞으로 뒤로 가기 기능을 이용하면 실제 브라우저의 기록을 가지고 수행하게 됩니다.
하지만 메모리 라우터는 브라우저의 기록에 의존하지 않고 자체적인 메모리에서 url를 관리할 수 있습니다.
대표적으로 단위 테스트와 서버사이트 랜더링에서 이용됩니다.
단위 테스트에서는 외부의 의존성을 최소화 해야하는데 메모리 라우터의 기능을 이용하면 브라우저 의존성을 낮추고 에플리케이션의 부분을 격리 테스트를 가능하게 합니다.
서버 사이드 렌더링은 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 향상시키는 데 도움이 됩니다. 메모리 라우터를 사용하면 브라우저 기록이 필요하지 않기 때문에 서버 사이드 렌더링 시에도 라우팅을 관리할 수 있습니다.
2. createHashRouter
이 라우터는 모든 트래픽을 React Router 애플리케이션으로 보내도록 웹 서버를 구성할 수 없는 경우에 유용합니다. 일반 URL을 사용하는 대신 URL의 해시(#) 부분을 사용하여 "애플리케이션 URL"을 관리합니다.
위의 설명 외에는 다른 기능은 createBrowserRouter와 같다고 합니다.
쳇지피티에게도 물어봤는데 큰 장점을 잘 못느끼겠습니다...
일반 url 과 다른 점은 #기호를 사용하는 것인데 그럼 위의 url로 서버에 바로 요청을 하는 것이 아니라 라우터로 들어와서 해당 url에 맞는 컴포넌트를 랜더링한다고 설명하는데 그냥 createBrowserRouter에서 제공하는 일반적인 라우터 기능인것처럼 들립니다. 이 부분은 계속해서 공부하다가 필요를 느끼게 될 때 더 알아봐야할 것 같습니다.
3. createStaticRouter
createStaticRouter은 서버에서 렌더링하기 위해 데이터 라우터를 활용하려는 경우에 사용됩니다(예: 노드 또는 다른 Javascript 런타임). 전체 개요를 보려면 서버측 렌더링 가이드를 참조하세요.
아직 서버사이트 렌더링에서 공부해보지 못해서 잘 모르겠습니다.
추가로 공부해서 이 부분에 대해서 다시 글을 작성해보겠습니다.
4. createBrowserRouter
이것은 모든 React Router 웹 프로젝트에 권장되는 라우터입니다. DOM 기록 API를 사용하여 URL을 업데이트하고 기록 스택을 관리합니다.
만약에 위의 상황과 특별히 부합하지 않는다면 그냥 createBrowserRouter를 쓰는게 좋습니다!!
참고자료
