1. Routing
1-1. 경로에 따라 각기 다른 화면을 보여주기
route + -ing : 경로(route)를 찾아가는 행위
즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.
1-2. SPA (Single Page Application, 단일 페이지 애플리케이션)
사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림.
SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공.
React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로(라이브러리!), react-router-dom 과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가할 수 있다.
2. 동적 라우팅
지금까지 해온 라우팅 방법으로는 완전히 정해진 경우(정적, static)에 대해서만 경로를 표현 할 수 있었습니다.
"/" =>
"/users" =>
"/products" =>
하지만 다음과 같은 경우라면 어떨까요?
id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지는 것을 볼 수 있습니다.
이는 다음 두 가지 개념(Path Parameter, Query Parameter)을 통해 적용해볼 수 있습니다.
2-1. 동적인 라우팅을 처리하는 방법
동적인 경로를 처리할 수 있는 방법으로 Path Parameter 와 Query Parameter 이 있습니다.
1) Path Parameter
// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />
// Good
"/users/:id" => <Users /> // useParams().id2) Query Parameter
// Bad
"/search?keyword=위코드" :
"/search?keyword=리액트" :
"/search?keyword=라우팅" :
"/search?keyword=쿼리스트링" :
"/search?keyword=SPA" :
// Good
"/search?keyword=something" : // useLocation().search
