react 는 자체적으러 라우팅 기능을 제공하지 않습니다. 따라서 나의 프로젝트에 라우팅 기능을 추가하기 위해 'react-reouter-dom' 의 컴포넌트를 이용합니다
1-1. 경로에 따라 각기 다른 화면을 보여주기
route + -ing : 경로(route)를 찾아가는 행위
즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.
1-2. SPA (Single Page Application, 단일 페이지 애플리케이션)
SPA 는 사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술.
사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림.
SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공. (페이지 전체를 새로고침 하지 않기 때문! ← 매우 중요)
React는 기본적으로 라우팅 시스템을 갖추고 있지 않으므로(라이브러리!), react-router-dom 과 같은 부가적인 라이브러리를 설치해서 라우팅 기능을 추가할 수 있습니다.
다음 예제 코드는 react-router-dom 을 사용한 라우팅에 필요한 기본적인 구조를 나타내고 있습니다.
정적라우팅, 동적라우팅
url 을 살펴보면 url 마지막에 특정 id 값이 들어가고(/32692, /53424), 해당 id 값에 따라 서로 다른 상세 페이지 정보가 화면에 그려지는 것을 볼 수 있습니다. id 값에 따라 무수히 많은 url 이 나타날 것이고, 각각의 모든 url 에 대해 미리 경로의 형태와 갯수를 결정할 수 없게 됩니다.
즉, URL에 들어갈 id를 변수처럼 다뤄야 할 필요성이 생긴 것입니다.
이처럼 정적이지 않은, 동적일 수 있는 경로에 대하여 라우팅을 하는 것을 동적 라우팅(Dynamic Routing)이라고 부릅니다.
이는 다음 두 가지 개념(Path Parameter, Query Parameter)을 통해 적용해볼 수 있습니다.
1) path paramerter
(나쁜예시)
"/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} />(좋은예시)
"/users/:id" => <Users /> // useParams().id
2) query parameter
(나쁜예시)
"/search?keyword=위코드" : <Search keyword="위코드" />
"/search?keyword=리액트" : <Search keyword="리액트" />
"/search?keyword=라우팅" : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA" : <Search keyword="SPA" />(좋은예시)
"/search?keyword=something" : <Search /> // useLocation().search