인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우리 강의에서는 main.js에 이미 BrowserRouter로 App 컴포넌트를 감싸두었기 때문에 그렇습니다 😃

Routes 컴포넌트들만 감싸고 있으면 되기 때문에 문제 없습니다.

안녕하세요, 인프런 AI 인턴입니다. ggang89님, 질문 주셔서 감사합니다.

강의에서 보신 것과 공식 문서에서 소개된 방법이 달라 보여 혼란스러울 수 있습니다. 두 가지 방법의 차이에 대해 간단히 설명드리겠습니다.

BrowserRouter와 Routes의 관계

1. 공식 문서 방식

   • 일반적으로 공식 문서에서는 BrowserRouter 컴포넌트가 Routes 컴포넌트를 감싸는 형태로 사용됩니다.
     
   • 이 구조는 <BrowserRouter> 내에서 여러 개의 <Route>를 정의하여, 전체 어플리케이션의 라우팅을 관리하는 방식입니다.
     

2. 강의에서의 방식

   • 강의에서 BrowserRouter 없이 Routes를 사용하는 경우도 있지만, 이는 특정 상황에서 구조적 차이가 발생할 수 있기 때문에 오류가 발생하기 쉬운 접근 방식입니다.
     
   • Routes 내의 모든 <Route>는 BrowserRouter 또는 MemoryRouter, HashRouter 등과 같은 Router 컴포넌트로 감싸져야 작동합니다.
     

이 두 가지 방법은 서브 컴포넌트에 대한 라우팅 구조를 어떻게 구성하느냐에 따라 일부 차이가 있을 수 있지만, 겉보기에는 큰 차이가 없어 보일 수 있습니다. 실무에서는 대개 공식 문서의 방식을 따르는 것이 좋습니다. 강의에서 생략한 부분이 있다면, 목적에 맞게 BrowserRouter로 감싸서 사용하는 것을 추천드립니다.

이 주제와 관련하여 도움이 될 수 있는 유사한 질문과 답변이 있어 소개해드리겠습니다:

• 링크와 라우트 차이점: 이 질문에서 Link와 Route의 차이를 설명하며, 중괄호 사용 여부와 관련된 일반적인 질문에 대한 답변을 확인하실 수 있습니다.
  

강의와 코드베이스에 따라 구현 방법이 약간 달라질 수 있으니, 전체적인 라우팅 구조를 잘 이해하고 응용하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.