LearnFit
YouTube, React Router 6 Tutorial #2 - Route Components
리액트 라우터 버전 6의 Route는 기본적으로 exact 방식
#전체
#개발자
#프론트엔드
#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
00:00*학습 시작 전 참고사항
react-router-v6 공식 문서 링크: https://reactrouter.com/docs/en/v6
영상 코드가 업로드된 github 주소: https://github.com/iamshaunjp/React-Router-Version-6/tree/lesson-2
사용하는 용어 정리:
pathname은 localhost:3000/products에서 /products를 의미
00:03*학습 시작 전 참고사항2
react router 버전5로 작성했던 코드를 수정하지 않은채 react router 버전6로 업그레이드 하니 에러가 발생한 모습입니다.
이 영상은 프로젝트에서 react router v6로 업그레이드 하면서 마주할 수 있는 에러를 디버깅 하는 것을 보여줍니다.
react-router 버전6를(로) 설치(업그레이드)하는 terminal 명령어: npm install react-router-dom@6
*25초 구간으로 jump 해주세요.
00:25~01:49
에러 유발 코드를 주석처리합니다.
ProductDetails.js의 nested route, useRouteMatch
About.js의 nested route
*useRouteMatch는 버전 6에서 사용되지 않습니다.
*nested 부분은 일단 주석처리만 하고 에러를 방지하고 넘어갑니다. 실질적인 해결은 다음 학습노트에서 언급합니다.
01:50~05:32
에러 유발 코드를 수정합니다.
App.js의 Switch 를 Routes 컴포넌트로 대체합니다.(버전6에서는 Switch가 사용되지 않습니다)
App.js의 exact 제거(버전 6에서는 모든 Route가 default로 exact가 적용됩니다, 즉 Route의 순서는 중요하지 않습니다)
App.js의 Route가 컴포넌트를 감싸는 방식을 element을 사용하는 방식으로 변경
*참고로 element에는 component가 아닌 element(JSX)를 입력해야합니다.
*element는 component를 호출해서 리턴되는 형태라고 생각하시면 됩니다.(component는 함수 element는 함수의 호출 결과 느낌)
05:32~05:53
위의 내용대로 수정한 결과, 에러가 사라졌습니다.
*nested route 부분은 주석처리 해놓았기 때문에 nav 부분만 화면에 표출됩니다.
*버전 6에서는 모든 Route가 exact하게 routing 되기 때문에 /about/offers에 대해선 어떤 Route도 해당되지 않습니다.(App.js에서 위의 pathname에 대해 대응하는 Route가 없으므로) 이후 이 러닝패스의 다음 학습노트에서 해당 부분을 다룹니다.
06:05~06:59
pathname이 '/test'인 Route에 대해서 element로 JSX를 넘겨줍니다.
이런 방식도 가능하다는 것을 알려주는 느낌입니다.
07:01~07:41
recap(복습)
*이후는 skip하셔도 좋습니다.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기