[React] URL 파라미터와 쿼리

• 파라미터 예시 : /profile/velopert
  • 특정 아이디 혹은 이름을 사용하여 조회할 때 
• 쿼리 예시 : /about?details=true
  • 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때

 

URL 파라미터

- url파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체 안의 params 값을 참조한다.

- match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어았다.

 

[Profile.js]

import React from 'react';

const data = {
    velopert: {
        name: '최수녕',
        description: '리액트를 좋아하는 개발자'
    },
    gildong: {
        name: '홍길동',
        description: '고전 소설 홍길동전의 주인공'
    }
};

const Profile = ({ match }) => {
    const {username} = match.params;
    const profile = data[username];
    if (!profile){
        return <div>존재하지 않는 사용자입니다.</div>
    }
    return (
        <div>
            <h3>
                {username}({profile.name})
            </h3>
            <p>{profile.description}</p>
        </div>
    );
};

export default Profile

 

[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';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to = '/'>홈</Link>
        </li>
        <li>
          <Link to = '/about'>소개</Link>
        </li>
        <li>
          <Link to = '/profile/velopert'>velopert 프로필</Link>
        </li>
        <li>
          <Link to = '/profile/gildong'>gildong 프로필</Link>
        </li>
      </ul>
      <hr />
      <Route path='/' component={Home} exact={true}/>
      <Route path={['/about', '/info']} component={About}/>
      <Route path='/profile/:username' component={Profile}/>
    </div>
  );
};

export default App

 

[결과]

 

 

 

 

URL 쿼리

- 쿼리는 location객체에 들어있는 search값에서 조회할 수 있다.

- location객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 애플리케이션의 현재 주소에 대한 정보를 지니고 있다.

- location은 다음과 같다.

{
	"pathname": "/about",
	"search": "?detail=true",
	"hash": ""
}

- 위 location객체는 http://localhost:3000/about?detail=true 주소로 들어갔을 때의 값이다.

- URL쿼리를 읽을 때는 위 객체가 지닌 값 중에서 serach값을 확인해야 한다.(이 값을 문자열 형태로 되어있다.)

- URL쿼리는 ?detail=true&another=1과 같이 문자열에 여러가지 값을 설정해 줄 수 있다.

- search값에서 특정 값을 읽어오기 위해서는 이 문자열을 객체 형태로 변환해주었야 한다.

- 쿼리문자열을 객체로 변환할 때는 qs라는 라이브러리를 사용한다.

$ yarn add qs

 

[About.js]

import React from 'react';
import qs from 'qs';

const About = ({ location }) => {
    const query = qs.parse(location.search, {
        ignoreQueryPrefix: true
    });
    const showDetail = query.detail === 'true';
    return (
        <div>
            <h1>소개</h1>
            <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트 입니다.</p>
            {showDetail && <p>detail값을 true로 설정하셨군요!</p>}
        </div>
    );
};

export default About;

 

[결과]