inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.3) 페이지 라우팅 2. 라우팅 설정하기

BrowserRouter사용방법

해결된 질문

196

ggang89

작성한 질문수 5

0

강의 12.3 보다가 의문이 들어서 질문 남깁니다.

강의에서 설명하고 사용하셨던 방법과 공식문서에서 BrowserRouter를 사용하는 방법이 달라서 헷갈립니다.

두가지 방법이 같은 것인지, 다르다면 어떻게 다른지 알려주세요

function App() {

return (

<BrowserRouter basename="/app">

<Routes>

<Route path="/" />

</Routes>

</BrowserRouter> );

}

=>공식문서에서는 이렇게 Routes를 BrowserRouter로 감싸서 사용했는데 강의 에서는 그러지 않아서 궁금합니다.!

javascript react node.js

답변 2

0

이정환 Winterlood

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

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

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

0

인프런 AI 인턴

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

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

BrowserRouter와 Routes의 관계

  1. 공식 문서 방식

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

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

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

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

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

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

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

useEffect와 lifecycle문의

0

27

2

프론트엔드 학습 수준 문의

0

39

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

48

2

데이터 로딩중 화면만 계속 나와요!!

0

55

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

79

2

이후의 커리큘럼 문의

0

102

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

50

2

최적화 관련 질문있습니다 (useMemo 등)

0

84

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

82

3

Date 객체에 관련하여 질문드립니다.

0

85

2

리액트 개정판 교재 질문

0

60

2

예제코드가 안나와요!

0

78

2

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

0

108

2

onMouseEnter 관련 문의 드립니다

0

92

3

배열의 렌더링 관련 질문 드립니다.

0

73

2

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

0

113

2

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

0

136

2

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

0

69

1

vs code 자동완성관련 문의

0

113

2

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

1

179

2

87강 필터 함수 질문

0

69

2

useRef, useState count 비교

0

67

2

안된다고했던 이유가 무엇이었는지 모르겠습니다

0

90

2

85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.

0

75

2