React - advanced Routing / TIL - 8

Routing

• 경로에 따라 각기 다른 화면을 보여주기

• 즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.

정적라우팅

<Route path="/login" element={<Login />} />

동적라우팅

<Route path="/products/:id" element={<Detailpage />} />

http://localhost:3000/products/6

http://localhost:3003/result/2

url 을 살펴보면 url 마지막에 특정 id 값이 들어간다.

해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려진다.

id 값에 따라 무수히 많은 url 이 나타날 것이고, 모든 url의 경우에 대해 생각할 수가 없다.

• 즉, URL에 들어갈 id를 변수처럼 다뤄야 한다.

이처럼 정적이지 않은, 동적일 수 있는 경로에 대하여 라우팅을 하는 행위를 동적 라우팅(Dynamic Routing)

동적라우팅에는 (Path Parameter, Query Parameter)가 있다.

Path Parameter

"/products/1" => <Users id={1} />
"/products/2" => <Users id={2} />
"/products/3" => <Users id={3} />
"/products/4" => <Users id={4} />
"/products/5" => <Users id={5} />

// 만약에 아이디가 1억개라면 어떻게 할까?

"/products/:id" => <ProductDetail /> // useParams().id

Query Parameter

"/search?keyword=위코드"    : <Search keyword="김개똥" />
"/search?keyword=리액트"    : <Search keyword="리액트" />
"/search?keyword=라우팅"    : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="자바스크립트" />
"/search?keyword=SPA"     : <Search keyword="SPA" />

// 만약에 키워드가 1억개라면 어떻게 할까?

"/search?keyword=something" : <Search /> // useLocation().search