[React] Router에서 파라미터와 쿼리

 

페이지 주소를 정의할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉠 수 있습니다.

파라미터: /profiles/meanbymin 
쿼리: /about?detail=true

이것을 사용하는것에 대하여 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용됩니다.

 

URL Params

Profile 페이지에서 파라미터를 사용해보겠습니다.
/profile/meanbymin 이런식으로 뒷부분에 username을 넣어줄 때 해당 값을 파라미터로 받을 수 있습니다.
Profile이라는 컴포넌트를 만들어서 파라미터를 받아오는 예제 코드를 작성해보겠습니다.

src/Profile.js

import React from "react";

const profileData = {
  meanbymin: {
    name: "오석민",
    description: "Frontend Engineer",
  }
};

function Profile({ match }) {
  const { username } = match.params;
  const profile = profileData[username];

  if (!profile) return <div>존재하지 않는 사용자입니다.</div>;
  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
}

export default Profile;

 

파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조합니다. match 객체안에는 현재의 주소가 Route 컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있습니다.

이제 Profile 을 App에서 적용해볼 건데요, path 규칙에는 /profiles/:username 이라고 넣어주면 username에 해당하는 값을 파라미터로 넣어주어서 Profile 컴포넌트에서 match props를 통하여 전달받을 수 있게 됩니다.

src/App.js

import React from "react";
import { Route, Link } from "react-router-dom";
import About from "./About";
import Home from "./Home";
import Profile from "./Profile";

function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route path="/profile/:username" component={Profile} />
    </div>
  );
}

export default App;

 

localhost:3000/profile/meanbymin 경로로 들어가보면 사전에 입력한 데이터들이 잘 표시됩니다.

 

Query

이번엔 About 페이지에서 쿼리를 받아오겠습니다. 

localhost:3000/about?username=meanbymin&name=오석민

이런 물음표(?)로 시작해서 정보가 담겨있는 듯한 주소들을 보신적이 있으실 겁니다. 물음표(?)의 뒷부분을 쿼리라고 하는데, 쿼리는 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있습니다. location 객체는 현재 앱이 갖고 있는 주소에 대한 정보를 지니고 있습니다.

이 작업을 할 때는  qs 라는 라이브러리를 사용하여 쉽게 할 수 있습니다.

qs 라이브러리를 설치합니다.

$ yarn add qs

이제, About 컴포넌트에서 search 값에있는 detail 값을 받아와서, 해당 값이 true 일때 추가정보를 보여주도록 구현을 해보겠습니다.

 

src/About.js

import React from "react";
import qs from "qs";

function About({ location }) {
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true,	// 물음표를 제거하고 받아오기 위해서
  });
  const detail = query.detail === "true";
  return (
    <div>
      <h1>소개</h1>
      <p>라우터 기초 예제</p>
      {detail && <p>detail값이 true입니다.</p>}
    </div>
  );
}

export default About;

 

localhost:3000/about?detail=true 경로로 들어가보면 'detail값이 true입니다' 라는 추가정보가 잘 보이실 겁니다.