뒤로 가기
홈으로 이동
러닝패스
공유하기
입문자를 위한 React Router(버전6)의 대표 이미지

입문자를 위한 React Router(버전6)

무료

⚡ 1시간이면 이런걸 할 수 있어요!

기초적인 React Router 버전5 문법을 다룹니다.
기초적인 React Router 버전6 문법을 다룹니다.
React Router 버전5에서 버전6로 업그레이드 할 때 발생하는 에러 원인을 파악합니다.
page 단위로 code spliting을 통해 lazy loading 하는 법을 배웁니다.
학습 시간을 줄였어요!
1시간
핵심 콘텐츠만 선별했어요!
5개 콘텐츠
이 분들은 꼭 보세요.
React Router 입문, 초보자
미리 알고 있어야 해요.
HTML, CSS, JS, React
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
React Router는 react로 작성된 웹 어플리케이션에 routing을 할 수 있게 도와주는 제일 인기 있는 라이브러리 중 하나입니다. 간단히 말해 routing은 특정 url에 어떤 화면을 띄워줄지 매칭해주는 작업이라고 생각하시면 되는데요, 싱글 페이지 어플리케이션인 리액트에서는 꼭 필요한 작업입니다. React Router가 최근 버전 5에서 버전 6로 업그레이드 되면서 변경된 부분들이 있는데요, 그 변경점을 다룬 유튜브 영상들에 꼼꼼히 노트했고 그것들을 모아 해당 러닝패스를 만들어보았습니다. 버전5를 모르시는 분들도 따라오실 수 있게 기본 개념들을 정리해놨으니 쭉 따라가시다가 버전6까지 파악해보시면 좋을거 같습니다. *해당 러닝패스는 해외 인기 개발자 유튜버 net ninja(구독자 90만, 영상 1,800개 보유)의 영상을 토대로 제작했습니다. 튜토리얼성 영상으로 유명한 유튜버인데요, react router를 처음 접하는 사람들이 조금이나마 쉽게 이해할 수 있게 풍부한 예시 코드와 간결한 preview를 제공한 것이 이 영상 시리즈를 선정한 이유였습니다. *영어 영상이지만 코드가 주된 콘텐츠이며 중요한 포인트는 꼼꼼하게 한국어로 필기했기 때문에 필기와 코드에 집중해서 학습하시면 될거 같습니다.
NOTE
Video
영상 재생 모양 아이콘

React Router 6 Tutorial #1 - Intro & Starter Project

출처: https://youtu.be/WfpmvgVZD1A
서원석의 프로필 이미지
서원석 님의 학습노트
React Router v6를 배우는 것이 이 러닝패스의 목적은 맞습니다. 그러나 React Router는 버전에 관계없이 기본적인 개념, 흐름이 비슷하고 오픈소스 등에서 작성된 코드를 참고할 때 v5에 맞춰진 코드가 존재할 수 있기에 먼저 v5에 대한 영상을 토대로 학습을 시작하겠습니다. 또 v5 방식을 알고나면 v6 방식이 얼마나 편한지도 알 수 있겠죠? *프로젝트 셋팅, 기본적인 동작 설명과 함께 React Router v5 설명이 주요 내용
NOTE
Video
영상 재생 모양 아이콘

React Router 6 Tutorial #2 - Route Components

출처: https://youtu.be/4X9YbQBcmL0
서원석의 프로필 이미지
서원석 님의 학습노트
React Router v5를 v6로 버전 업데이트합니다. 이 과정에서 에러가 발생하는데 이것을 같이 해결하며 v6 문법을 배우는 것이 해당 러닝패스의 묘미입니다(디버깅 방법도 개발에서 중요한 덕목) *버전 업데이트, 에러 발생 코드 주석처리, Route 컴포넌트가 달라진 점 소개가 주요 내용
NOTE
Video
영상 재생 모양 아이콘

React Router 6 Tutorial #3 - Redirects & useNavigate

출처: https://youtu.be/zCgruoRUxlk
서원석의 프로필 이미지
서원석 님의 학습노트
리다이렉트를 구현하는 법을 배웁니다. *리다이렉트란 특정 페이지 접근 시, 만약 조건이 필요하고 조건 충족이 되지 않을 때 다른 페이지로 강제 전환하는 것을 의미합니다. 구현 방법과 두 방식의 차이(Navigate, useNavigate)를 설명합니다.
NOTE
Video
영상 재생 모양 아이콘

React Router 6 Tutorial #4 - Nested Routes

출처: https://youtu.be/_gSmfgX89-8
서원석의 프로필 이미지
서원석 님의 학습노트
Nested route에 대해 배웁니다. 특정 페이지 내에서 url 뒤에 parameter 차이로 기존 내용에 추가적으로 콘텐츠가 보충 되면 좋을 때 사용하는 방식입니다. v5와 비교했을 때 v6 방식의 nested route가 얼마나 편리한지 알 수 있습니다.
💡
이 부분은 심화 학습 이예요. 조금 더 알아보고 싶다면 학습해보세요!
NOTE
POST

React Router v6 튜토리얼

출처: https://velog.io/@velopert/react-router-v6-tutorial
서원석의 프로필 이미지
서원석 님의 학습노트
*러닝패스 마지막에 선택 학습노트로 velopert님의 블로그 포스팅을 선택했습니다. 이 러닝패스의 목적이 React Router V6에 대해 빠르게 감잡기인만큼 비교적 상세하게 문법을 풀어쓴 부분이 목적과 맞지 않아 심화 학습을 희망하는 분들을 위해 구성했는데요, URL 파라미터, 쿼리 스트링을 언제 써야하는지와 코드 스플리팅 등 해당 러닝패스에서 디루지 않은 부분들이 추가적으로 궁금하신 분들께 도움이 될 학습노트입니다.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기