뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, React Router v5 → v6 빠르게 훑어보기

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-- 여기까지 입니다 --
✔ 학습 완료

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

테크주니어님의 다른 노트는 어때요?

테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
11
00:18
Border에 대한 개념적 설명 : border는 HTML 요소의 테두리를 설정
00:33
Border의 속성 'border-style'에 대한 설명
👍
5
스크랩
테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS Tutorial For Beginners 42 - Width & Height

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
4
00:39
width, height 설명을 위한 예제 코드에 대한 설명
01:51
'px'(본 강의에서는 static width로 표현)로 block level 엘리먼트에 width, height 값을 적용
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기