파라미터(Parameter)와 쿼리(Query) : 유동적인 값 전달을 위한 URL 전략

history.pushState(null, '', '/kpi/reply');

 

인턴 생활 2주차! 애플리케이션 코드를 분석하다 파라미터를 변경하는 이유에 대해 이해하고 있지 않다는 것을 깨달았다.

그래서 파라미터와 쿼리에 대해 정리해보고자 한다!

 

 

---

 

페이지 주소를 정의할 때, 유동적인 값을 전달해야할 때가 존재한다.

이 때 파라미터와 쿼리를 활용한다.

 

 

Tip

1. URL을 통해 보여주는 값을 지정하기 때문에, 새로고침시 해당 데이터 값들을 잃지 않는다

2. 유효하지 않은 Parameter에 대해서는 Validation 검사를 해주어야 한다.

 

 

 

파라미터 : /profiles/joy

    → 일반적으로 파라미터는 특정 id나 이름을 가지고 조회할 때 사용

쿼리 : /about?detail=true

    → 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용

 

 

---

 

URL Params

 

예를 들어 프로필 페이지가 있을 때, 뒷 부분에 username을 넣어주며, 해당 값을 파라미터로 받을 수 있다.  /profile/joy 

 

src/Profile.js

import React from "react";

const profileData = {
  joy: {
    name: "차조이",
	  description: "오늘도 열심히 일을 하네.",
  }
};

// 파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조한다.
// match 객체 안에는 현재의 주소가 Route 컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있다.
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;

 

path 규칙에는 /profiles/:username 으로 작성해준다면, username에 해당하는 값을 파라미터로 넣어주어서 Profile 컴포넌트에서 match props를 통해 전달받을 수 있게 된다.

 

src/App.js

<Route path="/profile/:username" component={Profile} />

 

---

 

Query

localhost:3000/about?username=joy&name=차조이

 

이렇게 ? 뒤에 정보가 담겨있는 듯한 주소를 본 적이 있을 것이다. 이 ? 뒷 부분을 쿼리라고 한다.

 

쿼리는 라우트 컴포넌트에게 props 전달되는 loccation 객체에 있는 search 값에서 읽어올 수가 있다.

location 객체는 현재 앱이 갖고 있는 주소에 대한 정보를 가지고 있다.

 

qs 라이브러리는 위 작업을 도와준다.

 

About 컴포넌트에서 search 값에 있는 detail 값을 받아와, 해당 값이 True 일 때 추가정보를 보여주도록 하는 예제이다.

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;