React Router v5 → v6 빠르게 훑어보기

#전체

#개발자

#프론트엔드

#리액트

#리액트 라우터

#react

#react-router

#v5

#v6

#upgrade

#업그레이드

00:30-- 여기서부터 학습해주세요 -- 이전 버전의 react router가 적용된 예시 프로젝트 설명

03:52React router v5 버전인 이전 프로젝트를 v6로 변경

04:23React router v5 -> v6로 인한 변경사항 : Switch 대신 Routes 사용

04:52React router v5 -> v6로 인한 변경사항 : useHistory 대신 useNavigate 사용

06:05React router v5 -> v6로 인한 변경사항 : useRouteMatch 대신 상대 경로를 사용

07:49React router v5 -> v6로 인한 변경사항 : Route에 children이나 component 대신, element 사용

08:39React router v5 -> v6로 인한 변경사항 : Route는 Routes의 직속 자식이어야 함

09:25React router v5 -> v6로 인한 변경사항 : Route에 exact Prop이 사라짐 -> 서브 경로가 필요시 path에 * 사용

10:42React router v5 -> v6로 인한 변경사항 : Optional URL 파라미터 사라짐 -> 필요시 Route 2개 생성

12:03React router v6에서 서브 라우트를 구현하는 새로운 방법 : Outlet 컴포넌트

14:01React router v5 -> v6로 인한 변경사항 : NavLink에 activeStyle, activeClassName 사라짐

14:54본 학습노트 영상에서 다룬 변경사항은 React router에서 자주 사용되는 것들을 위주로 소개 되었지만, 그 외 업데이트 사항을 더 알고 싶으면 해당 공식문서 참조 : https://reactrouter.com/docs/en/v6/upgrading/v5

15:04React Router 'v5' 스펙으로 현재 진행중인 프로젝트가 있다면 본 학습노트 영상을 보는 시점에서 바로 마이그레이션을 하기보다는 v5가 v6에서도 잘 동작하게 해주는 'Backwards Compatibility Package'가 업데이트 된 이후에 진행할 것을 추천

15:42-- 여기까지 입니다 --

✔ 학습 완료

취소

작성하기