뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, React Router 6 Tutorial #4 - Nested Routes
서원석님의 학습노트

리액트 라우터 버전6의 더욱 간단해진 Nested route

#전체
#개발자
#프론트엔드
#react router
#react router 6
#react router tutorial
#router
#react router 6 tutorial
#react router version 6
#route
#route component
#routes
#switch
#switch vs routes
#nested
#nested routes
#nested route
00:00 *해당 영상에서는 react router 버전5에 맞게 작성된 nested route 구현 코드를 버전 6에서 호환되도록 수정합니다. 공식 문서: https://reactrouter.com/
00:51~01:40 해당 구간의 주석 코드는 버전 5용으로 작성됐던 nested route 관련 코드라 버전 6에서 오류를 일으킵니다. 우선 주석을 해제하며 디버깅을 시작합니다. /about: 해당 pathname으로 접근 시 하얀 화면만 나옵니다. 이미 App.js에서 /about pathname에 대한 routing 작업을 해놨는데도 불구하구요. Console 창의 에러메시지를 확인해보니 모든 Route는 Routes 내부에서 사용되어야한다고 말하고 있습니다.(Route가 무조건 Routes 내부에 있어야하는 것은 버전 6로 오면서 생긴 특징) /about/offers: 해당 pathname으로 접근 시 네비게이션 헤더만 나올 뿐 내부 내용은 나오지 않습니다. 에러 메시지를 확인하니 /about/offers에 대한 routing이 되고 있지 않다고 하네요.(이에 대한 자세한 이유는 밑에서 언급)
01:40~03:45 nested route 관련 수정 사항 1. Route를 Routes로 감쌉니다. 2. Route로 Offers를 감싸지 않고 Route의 element에 <Offers />를 입력합니다.(해당 내용은 다른 학습노트 참고) 3. Route의 path를 '/about/offers'에서 'offers'로 수정합니다.(선택) 3번의 경우 필수는 아닙니다. 그러나 react router 버전6로 오면서 Route의 path는 relative한 특징이 생깁니다. 이 말이 무엇이냐면 부모 Route의 path를 기준점으로 잡게 된다는 것이에요. 예: 현재 About 컴포넌트는 App.js에서 pathname '/about'에 routing 되어있습니다. 그리고 offers에 대한 routing은 About 컴포넌트 내에서 이뤄지므로 pathname 시작점이 자동으로 /about으로 잡힙니다. 그래서 path="offers"만 적어도 알아서 path가 '/about/offers'인 것으로 알아듣는 것이죠. 이것이 react router 버전 6의 특징 중 하나입니다. 다시 돌아와서, 3번은 필수가 아닙니다. 그렇지만 About 컴포넌트 내에서 사용되는 Route의 path를 적을 때 앞에 오는 path가 뭐였는지 기억할 필요없이 그냥 뒤에 붙을 pathname만 적어주면 되니까 더욱 편리하겠죠?
03:46~05:18 About이 유발하던 에러는 해결이 되었습니다(Route가 Routes 내에 존재해야한다던 에러) 그러나 아직 /about/offers에 대한 routing이 되고있지 않다는 에러는 해결되지 않았습니다. 이제 이 에러를 해결합니다. react router 버전6에서는 Route가 기본적으로 exact 방식을 사용하기 때문에 pathname과 Route에 입력된 path가 동일해야지만 routing이 동작합니다.  '/about' pathname에 대해서는 routing이 되고 있지만 '/about/offers' pathname에 대해서는 routing 되고 있지 않기 때문에 /about/offers로 접근 시 어떠한 화면도 보여주지 않는 것이죠. 이를 해결하기 위해 어떻게 해야할까요? <Route path='/about/offers' element={<About />} /> 를 추가로 작성해야할까요? 물론 이렇게 작성해도 문제가 없겠지만 '*'를 path 뒤에 붙이는 것으로 이 문제를 해결할 수 있습니다. <Route path='/about/*' element={<About />} /> 위의 Route는 /about을 포함해서 /about/offers, /about/ahseklj 등 어떠한 형식의 pathname이 '/about'뒤에 붙어도 About 컴포넌트를 routing하게 됩니다.
05:23/about /about/offers 위의 두 pathname에 대해 의도했던대로 routing 되는 것을 확인가능합니다. /about/*로 인해 /about/adhlakje 등의 pathname을 입력해도 <About /> 가 렌더링되지만 About 내부의 /about/offers와는 매칭되지 않기에 Offers 컴포넌트는 렌더링 되지 않음
06:51About의 수정사항대로만 코드를 변경하면 ProductDetails도 nested route 관련 에러가 해결돼서 똑같이 생각해보시면 됩니다. 다만 기존 버전5에서 nested route를 위해서 useRouteMatch를 통해 path를 알아내고, 이 path를 Route의 path에서 활용해야했던 번거로움을 버전 6에서는 offers만 적어주면 해결된다는 점을 다시 한 번 상기해주시면 좋을거 같네요. *ProductDetails는 /products/:id에 routing 되어있습니다. 그래서 부모 Route의 path를 기준으로 path를 작성 할 수 없었던 버전5에서는 동적 값인 :id에 맞춰 nested route를 구현하기 위해 useRouteMatch를 사용해야했던거죠.
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기