React | Router : URL로 parameter 전송하기

 이전 포스팅에서 SPA의 한계를 극복하고자 라우터를 이용하여 경로에 알맞은 컴포넌트를 불러오는 방법에 대해 공부했다.

 

React | Router : URL로 페이지 접근하기

 

 라우터를 이용하여 경로를 설정할 수 있으니 이제 url로 파라미터를 전송하는 것이 가능해진다. path와 query string을 이용하여 파라미터를 전송하여 라우팅된 페이지에서 해당 파라미터를 받아서 사용해보자.

 

Path를 이용한 파라미터 전송(match)

 전송 방법은 node.js와 동일하다. 라우팅을 진행할 때 라우터 경로를 '/:key'로 지정하면 해당 위치의 경로에 value를 넣어 파라미터를 전송할 수 있다.

 

<Router>
  <Link to='/'>HOME</Link> <br/>
  <Link to='/hello/value1/value2'>HELLO</Link>
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/hello/:key1/:key2' component={Hello} />
  </Switch>
</Router>

 

 위의 코드에서 라우팅과 동시에 key1과 key2에 각각 value1, value2 라는 데이터를 전송해주었다. 이제 Hello 컴포넌트에서 key를 통해 해당 value에 접근해보자.

 

// hello.js

import React from 'react';

class Hello extends React.Component {
  render() {
  	const { params } = this.props.match;
    
    return(
      <div>
      	key1 : { params.key1 }, <br/>
        key2 : { params.key2 }
      </div>
    )
  }
}

export default Hello;

 

 'this.props.match.params'는 url path로 넘겨진 파라미터 객체가 반환된다. 해당 객체에서 라우팅 시 지정한 key값으로 원하는 데이터로 접근이 가능하다.

 

url path를 통해 파라미터 전달 결과

 

Query String을 이용한 파라미터 전송(location)

 URL의 쿼리스트링을 통해 파라미터를 전송해보자. 쿼리스트링의 형식은 '/path?key1=value1&key2=value2' 이다. path로 파라미터를 전달하는 방법은 key를 라우팅해주어야 하지만 쿼리스트링의 파라미터 전달방법은 /path 까지만 라우팅을 하고 쿼리스트링은 따로 url로 요청하여 정보를 전달한다.

 

<Router>
  <Link to='/'>HOME</Link> <br/>
  <Link to='/hello?id=react&author=mememe'>HELLO</Link>
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/hello' component={Hello} />
  </Switch>
</Router>

 

 위의 코드에서 /hello 까지만 라우터를 설정해주고 링크를 통해 id=react, author=mememe라는 데이터를 전송해주었다. 

 

// hello.js

import React from 'react';

class Hello extends React.Component {
  render() {
    const { search } = this.props.location;
    console.log(search);
    
    return(
      <div>
      	{search};
      </div>
    )
  }
}

export default Hello;

 

 쿼리 스트링으로 전달된 데이터는 경로와는 다르게 'this.props.location.search'를 통해 전달 받을 수 있다. 별다른 파싱 과정을 거치지 않아 String 형식으로 반환된다. 

 

쿼리 스트링을 통한 파라미터 전달 결과

 

 문자열을 json 형식으로 파싱하고 싶다면 직접 메서드를 작성해도 되지만 간단하게 'query-string' 모듈을 임포트하여 'parse()' 메서드를 사용하면 된다.

 

import queryStirng from 'query-string'

const { search } = this.props.location;	// 문자열 형식으로 결과값이 반환된다.
const queryObj = queryString.parse(search);	// 문자열의 쿼리스트링을 Object로 변환

const { id, author } = queryObj;

 

---

Reference

 

·https://justmakeyourself.tistory.com/entry/querystring-path-of-react-router?category=752940