차이 이해하기: BrowserRouter vs Router with history.push()
소개
React Router DOM (v5) 패키지를 사용하면, BrowserRouter와 Router 두 가지 라우팅 컴포넌트를 만날 수 있습니다. 이 둘의 차이를 이해하고 어느 컴포넌트를 애플리케이션에서 사용해야 하는지는 혼동스러울 수 있습니다. 이 기사는 history.push() 함수 사용과 관련하여 BrowserRouter와 Router 사이의 차이를 명확히하고 선택에 도움을 주기 위해 작성되었습니다.
BrowserRouter: UI와 URL 동기화
BrowserRouter 컴포넌트는 주로 HTML5 history API, 특히 pushState, replaceState 및 popstate 이벤트를 활용합니다. 주요 목적은 애플리케이션의 UI를 브라우저의 URL과 동기화하는 것입니다. 이는 앱 내에서 탐색하거나 동작을 수행할 때 브라우저 주소 표시줄의 URL이 자동으로 업데이트된다는 것을 의미합니다.
BrowserRouter를 사용하면 URL 업데이트나 history 관리를 명시적으로 처리할 필요가 없습니다. 자동으로 처리되기 때문에 HTML5 브라우저 애플리케이션에 편리하게 사용할 수 있습니다.
Router: 저수준 인터페이스
한편, Router 컴포넌트는 React Router DOM의 모든 라우터 컴포넌트에 대한 공통 저수준 인터페이스 역할을 합니다. 이는 BrowserRouter, HashRouter, MemoryRouter, NativeRouter 및 StaticRouter와 같은 고수준 라우터의 기반이 됩니다.
Router 컴포넌트 자체는 BrowserRouter와 달리 URL 동기화를 자동으로 처리하지 않지만, 보다 고급 사용 사례에 대한 유연성을 제공합니다. 이를 통해 history 개체를 수동으로 처리하고 특정 요구에 맞게 라우팅 동작을 사용자 정의할 수 있습니다.
history.push() 차이 이해하기
이제 history.push() 함수 사용에 있어서 BrowserRouter와 Router 사이의 차이를 이해해봅시다.
BrowserRouter를 사용할 때, BrowserRouter 컴포넌트가 내부적으로 history 개체를 처리하고 직접적인 접근 권한이 없습니다. 따라서 Redux thunk 액션이나 다른 컴포넌트가 아닌 문맥에서 history 기반 탐색을 수행하려고 할 경우, history.push(‘/myNewRoute’)는 브라우저 주소 표시줄의 URL은 업데이트하지만 해당 경로 뒤에 있는 컴포넌트는 렌더링되지 않습니다. 이 동작은 일부 경우에 예상치 못할 수 있습니다.
반면 BrowserRouter 대신 Router 컴포넌트를 가져오면 매개변수로 직접 history 개체를 전달하고 React 컴포넌트 외부에서 접근할 수 있습니다. 이는 Redux thunk 액션이나 다른 컴포넌트 문맥에서 올바르게 history.push(‘/myNewRoute’)를 수행하고 history 개체에 접근할 수 있다는 것을 의미합니다.
결론
BrowserRouter와 Router 사이의 선택은 특정 사용 사례와 요구 사항에 따라 다릅니다. URL 자동 동기화가 필요하고 컴포넌트 외부에서 history 개체에 직접적인 접근이 필요하지 않은 경우, BrowserRouter를 사용하는 것이 바람직합니다. 그러나 history 개체에 대한 더 많은 제어와 컴포넌트 외부에서 history 기반 탐색을 수행해야 하는 경우, 수동으로 생성한 history 개체를 사용하여 Router 컴포넌트를 사용하는 것이 더 나은 선택입니다.
BrowserRouter는 대부분의 HTML5 브라우저 앱에 적합하고, Router는 사용자 정의 라우팅 요구에 대한 고급 유연성을 제공합니다.
BrowserRouter와 Router 사이의 주요 차이를 이해하고, history.push()의 사용에 어떤 영향을 미치는지 이해하면 React 애플리케이션에서 원활한 탐색을 보장할 수 있습니다.
기억하세요, 대부분의 HTML5 브라우저 앱에는 BrowserRouter가 적합하고, 사용자 정의 라우팅 요구에는 Router가 높은 유연성을 제공합니다.
참고 자료 :
https://stackoverflow.com/questions/56707885/browserrouter-vs-router-with-history-push
같은 카테고리의 다른 글 보기 :
