React Router
1.Adding a Router
첫 번째 router 를 만들어보자.
2.The Root Route
글로벌 레이아웃을 추가해보자.
3.Handling Not Found Errors
기본적인 오류 처리 화면을 만들어 보자.
4.The Contact Route UI
contact UI를 생성하고 새 route에 추가해보자.
5.Nested Routes
Outlet 컴포넌트를 이용해서 중첩된 route를 구성해보자.
6.Client Side Routing
Link 컴포넌를 이용해 client side route를 구현해보자.
7.Loading Data
데이터를 받아오는 api인 loader와 useLoaderData를 알아보자.
8.Data Writes + HTML Forms
React Router에서의 Form 동작과 기존의 HTML Form 동작의 차이점에 대해 알아보자.
9.Creating Contacts
서버에 POST 요청을 전송하는 대신 Client side routing을 사용해보자.
10.URL Params in Loaders
URL params의 사용법을 알아보자
11.Updating Data
데이터를 업데이트하기 위한 Form 페이지를 만들어보자.
12.Updating Contacts with FormData
이제 데이터를 업데이트하기 위해 route에 action을 달아보자.
13.Mutation Discussion
폼 요청시 무슨 일이 일어나고 있는 지 조금 더 알아보자.
14.Redirecting new records to the edit page
리다이렉트를 이용해보자
15.Active Link Styling
<NavLink>를 사용해보고 장점을 알아보자.
16.Global Pending UI
useNavigation 훅을 이용해서 로딩페이지를 구현하는 방법에 대해 알아보자.
17.Delete Records
데이터 삭제의 메커니즘을 알아보자.
18.Contextual Errors
이전에 만든 글로벌 에러페이지 대신에 contextual error 를 만들어 보자.
19.Index Routes
Index Routes에 대해 알아보자.
20.Cancel Button
useNavigate를 이용한 뒤로가기 기능에 대해 알아보자.
21.URL Search Params and GET Submissions
URLSearchParams가 어떻게 만들어지는지 알아보자.
22.GET Submissions with Client Side Routing
client side routing에서의 get submission을 통해 사이드 목록을 필터링해보자.
23.Synchronizing URLs to Form State
input의 value와 데이터를 동기화해보자.
24.Submitting Forms `onChange`
자동으로 submit하는 방법에 대해 알아보자.
25.Adding Search Spinner
useNavegation 을 통해서 시간 지연에 대한 즉각적인 피드백을 제공해보자.
26.Managing the History Stack
히스토리 스텍이 쌓이는걸 방지해보자.
27.Mutations Without Navigation
fatcher를 사용해서 navigation 없이 데이터를 변경해보자.
28.Optimistic UI
Optimistic UI가 무엇인지 알아보고 적용해보자.
29.Not Found Data
예상가능한 오류에 대한 오류페이지를 수정해보자.
30.Pathless Routes
자식 route에 동일한 오류 페이지를 보여주도록 하는 간편한 방법인 pathless routes에 대해 알아보자.
31.JSX Routes
JSX로 Routes를 구성하는 방법에 대해 알아보자.