뒤로 가기
홈으로 이동
노트
POST

React Router v6 튜토리얼

출처: https://velog.io/@velopert/react-router-v6-tutorial

React Router v6 튜토리얼

React 대표적인 튜토리얼 블로거 velopert님이 작성한 React Router v6에 관한 포스팅입니다.
React Router를 알기 전 알아야하는 개념인 routing, single page application 등 부터 시작해서 v6 문법 설명, 코드 스플리팅 설명으로 끝나는 핵심 요약 포스팅입니다.
아래는 제가 해당 포스팅을 읽으면서 눈에 띈, 즉 잘 알아놔야겠다고 느낀 포인트들인데요, 글이 길어 휙휙 넘기게 되더라도 요 부분들은 눈여겨 보시는 것을 추천 드립니다.
특히 URL 파라미터, 쿼리 스트링을 언제 사용하는지 차이점과 사용법을 다룬 파트, 코드 스플리팅 부분은 강추 드립니다!

4.1 URL 파라미터.
4.2 쿼리 스트링.
5.1 중첩된 라우팅(Outlet, 공통 레이아웃).
6.2 NavLink.
6.3 Not Found 페이지 만들기.
7.0 코드 스플리팅(lazy loading) - https://stackblitz.com/github/remix-run/react-router/tree/main/examples/lazy-loading?file=src/App.tsx

✔ 학습 완료

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

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩