React - Advanced Router

리엑트는 SPA (Single Page Application) 한 개의 페이지로 이루어진 어플리케이션이기에 다른 페이지로 이동할 때 서버에 새로운 페이지를 요청하는게 아니라, 새로운 페이지에서 필요한 데이터만 받아 새로운 뷰를 만들어 사용자에게 보여주게 된다. 따라서 라우팅(Routing)이라는 기능을 사용하게 되는데 이번에는 기본적인 라우팅 외 path parameter / query parameter에 대해서 알아보자!

 

정적 라우팅(Static Routing) vs 동적 라우팅(Dynamic Routing)

 

1. 정적 라우팅

• 정적 라우팅과 동적 라우팅에 관해 배우면서 이때까지 내가 사용했던 라우팅 방법은 정적 라우팅이라는 것을 알았다.
• 정적 라우팅은 쉽게 경로가 완전히 정해진 경우 사용되는 방법으로 사용하는 방법은 다음과 같다.

<Routes>
   <Routes>
      <Route path="/" element{<컴포넌트 />} />
      <Route path="/users" element{<컴포넌트 />} />
      <Route path="/id" element{<컴포넌트 />} />
      <Route path="/products" element{<컴포넌트 />} />
   </Routes>

</Routes>

• 주소창에 /users 또는 /id 이러한 형식으로 입력하게 되면 설정해둔 컴포넌트로 이동하게 된다. 
• / 는 기본(메인)페이지를 의미한다.

 

2. 동적 라우팅

• 웹 사이트의 URL을 보다보면 마지막에 특정 수 ex) 54234 가 들어 있는 것을 볼 수 있다. 그러면 웹 개발자는 모든 URL에 대해서 54234개의 경로를 설정하였을까?
• 당연히 아니다. URL에 들어갈 id를 변수처럼 관리하여 사용하는 방법을 바로 동적 라우팅이라고 부른다.

 

2.1 Path Parameter

<Routes>
   <Route path='/product/:id' element={<컴포넌트 />} />
</Routes>

• 다음 예시에서 사용된 :는 parameter가 사용될 것을 의미한다.
• :id에서 id는 Path Parameter의 이름을 의미한다. 따라서 이름은 내가 아무거나 설정해 줄 수 있다는 뜻이다. ex) :user 가능
• 제품 리스트에서 제품 하나를 클릭하게 되면 /product/1로 이동하거나 /2 등으로 이동한다는 것을 알겠다. 그럼 어떻게 제품 상세 페이지에서 그러한 정보를 가져와서 연결을 시켜주는 것일까?

 

2.1.1 useParams

• useParams훅을 통해서 다음 궁금증에 대해 해결할 수 있다.

function Detail() {

const navigate = useNavigate();
const params = useParams();


const goToDetail = () => {
    navigate(`/product/${params.id}`)
}

}

• Params훅을 params변수에 정의하고 useNavigate 훅을 사용하여 params.id 즉 페이지의 id값을 얻어서 이동하고자 하는 url로 이동하는 방식이다.
• 정리하자면 useParams는 Router에 등록해둔 path parameter 정보를 담고 있는 객체를 반환한다.

 

2.2 Query Parameter

• search?keyword=something