러닝패스

서원석

개발자

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

무료

⚡ 5개의 콘텐츠로 1시간이면 이런걸 할 수 있어요!

•

기초적인 React Router 버전5 문법을 다룹니다.

•

기초적인 React Router 버전6 문법을 다룹니다.

•

React Router 버전5에서 버전6로 업그레이드 할 때 발생하는 에러 원인을 파악합니다.

•

page 단위로 code spliting을 통해 lazy loading 하는 법을 배웁니다.

이 분들은 꼭 보세요.

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를 제공한 것이 이 영상 시리즈를 선정한 이유였습니다.

*영어 영상이지만 코드가 주된 콘텐츠이며 중요한 포인트는 꼼꼼하게 한국어로 필기했기 때문에 필기와 코드에 집중해서 학습하시면 될거 같습니다.

큐레이터의 노트 소개

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

서원석 님의 학습노트 외 1개

학습노트 제목: 왕초보를 위한 React Router v5 핵심 요약(feat. 풍부한 예시 코드, 꼼꼼한 설명)

Video

React Router 6 Tutorial #1 - Intro & Starter Project

출처: https://youtu.be/WfpmvgVZD1A

#전체 #개발자 #프론트엔드 #react router #react router 6 #react router tutorial #router #react router 6 tutorial #react router version 6

큐레이터의 노트 소개

React Router v5를 v6로 버전 업데이트합니다. 이 과정에서 에러가 발생하는데 이것을 같이 해결하며 v6 문법을 배우는 것이 해당 러닝패스의 묘미입니다(디버깅 방법도 개발에서 중요한 덕목) *버전 업데이트, 에러 발생 코드 주석처리, Route 컴포넌트가 달라진 점 소개가 주요 내용

서원석 님의 학습노트

학습노트 제목: 리액트 라우터 버전 6의 Route는 기본적으로 exact 방식

Video

React Router 6 Tutorial #2 - Route Components

출처: https://youtu.be/4X9YbQBcmL0

#전체 #개발자 #프론트엔드 #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

큐레이터의 노트 소개

리다이렉트를 구현하는 법을 배웁니다. *리다이렉트란 특정 페이지 접근 시, 만약 조건이 필요하고 조건 충족이 되지 않을 때 다른 페이지로 강제 전환하는 것을 의미합니다. 구현 방법과 두 방식의 차이(Navigate, useNavigate)를 설명합니다.

서원석 님의 학습노트

학습노트 제목: 리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

React Router 6 Tutorial #3 - Redirects & useNavigate

출처: https://youtu.be/zCgruoRUxlk

#전체 #개발자 #프론트엔드 #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 #redirect #useRedirect #navigate #useNavigate

큐레이터의 노트 소개

Nested route에 대해 배웁니다. 특정 페이지 내에서 url 뒤에 parameter 차이로 기존 내용에 추가적으로 콘텐츠가 보충 되면 좋을 때 사용하는 방식입니다. v5와 비교했을 때 v6 방식의 nested route가 얼마나 편리한지 알 수 있습니다.

서원석 님의 학습노트

학습노트 제목: 리액트 라우터 버전6의 더욱 간단해진 Nested route

Video

React Router 6 Tutorial #4 - Nested Routes

출처: https://youtu.be/_gSmfgX89-8

#전체 #개발자 #프론트엔드 #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

💡

이 부분은 심화 학습 이예요. 조금 더 알아보고 싶다면 학습해보세요!

큐레이터의 노트 소개

*러닝패스 마지막에 선택 학습노트로 velopert님의 블로그 포스팅을 선택했습니다. 이 러닝패스의 목적이 React Router V6에 대해 빠르게 감잡기인만큼 비교적 상세하게 문법을 풀어쓴 부분이 목적과 맞지 않아 심화 학습을 희망하는 분들을 위해 구성했는데요, URL 파라미터, 쿼리 스트링을 언제 써야하는지와 코드 스플리팅 등 해당 러닝패스에서 디루지 않은 부분들이 추가적으로 궁금하신 분들께 도움이 될 학습노트입니다.

서원석 님의 학습노트