inblog logo
|
석우의 개발블로그
    React

    왜 BrowserRouter 일까?

    HashRouter 와 BrowserRouter 의 차이와 어떤 걸 써야 하는지 알아보자
    Feb 13, 2024
    왜 BrowserRouter 일까?
    Contents
    HashRouter 와 BrowserRouter 의 차이

    결론 부터 말하자면 필수불가결한 상황이 아니라면 BrowserRouter 를 사용하는게 좋다.

    HashRouter 와 BrowserRouter 의 차이

    HashRouter

    • 주소에 '#' 가 붙는다. ex) baseurl.com/#/signup/info1

    BrowserRouter

    • 주소가 정상적으로 작성된다. ex) baseurl.com/signup/info1

    그러면 공식문서에서는 어떤 라우터를 추천할까?

    위와 같이 강력하게 HashRouter를 사용하지 말라고 한다.
    그러면 왜 사용하지 말라고 하는 것일까?

    Next.js 로 프론트엔드와 백엔드를 한꺼번에 개발한다고 생각해보자.
    클라이언트가( 브라우저 )서버 요청 시 baseUrl/#/user/signup 라는 주소로 Next.js서버로 요청을 보내게 된다.
    일반적으로 클라이언트와 서버 사이에는 nginx 같은 reversy proxy서버를 두게 된다.
    이런 reversy proxy 서버는 대부분의 경우 rfc 3986 등에서 명시하고 있는 URI-identifier의 역할을 따르도록 구현되어있다.
    즉 해쉬 뒤의 부분을 제거하는 기능이 포함되어있을 수도 있기 때문에 baseUrl/# 뒤가 잘려서 서버에서 정상적인 URI 값을 받을 수 없게 된다.

    이러한 이유로 서버로 url을 보내지 않는 상황에서 hashRouter가 사용될 수 있다고 다른 블로그에서 언급 하고 있는 것이다. ( 물론 위처럼 이유가 적혀있는 글은 본 적이 없다. )

    HashRouter와 BrowserRouter에 대해 공부하며 어떤 차이가 있는지 정말 많은 고민을 했는데 친한 백엔드 개발자분과 한 시간 가량 대화를 하며 위와 같은 결과를 도출할 수 있었다.

    Share article
    Contents
    HashRouter 와 BrowserRouter 의 차이

    석우의 개발블로그

    RSS·Powered by Inblog