history 객체 참조
History는 브라우저의 세션 기록을 관리하는 객체로 해당 객체의 메서드인 goBack(), replace(), push()등을 사용하여 원하는 라우팅을 할 수 있다.
세션
사용자가 웹 브라우저를 통해 웹서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점
<Route path="/sports" component={Sports} />function Sports({history}) {
console.log(history);
}위의 방식을 이용하여 라우팅을 한다면, history 객체는 props로 전달되기 때문에 props.history로 참조 할 수 있다.
<Route path="/news">
<News />
</Route>import { useHistory } from 'react-router';
function News() {
const history = useHistory();
console.log(history);
}하지만 위의 방식을 이용하여 라우팅을 한다면 useHistory hook을 사용하여 history 객체를 참조해야 한다.
그렇다면 라우트 컴포넌트가 아닌 컴포넌트에서도 history 객체에 접근이 가능할지 궁금했다.
import { withRouter } from 'react-router-dom';
const WithRouterSample = ({ location, match, history }) => {
console.log(history);
};
export default withRouter(WithRouterSample);withRouter HoC를 사용하면 마찬가지로 history 객체를 참조할 수 있다.
물론 위의 모든 방식은 history 뿐만 아니라 match, location 객체를 참조할 수 있다.
path parameter와 query String
페이지 url를 정의 할 때 동적으로 값을 전달해야 할 때도 존재한다. 이는 상황에 따라서 path parameter와 query string으로 나눌 수 있다.
path parameter: /detail/3
query string: /detail?price=150000
path parameter
일반적으로 path paramter는 id나 이름과 같이 특정된 자원을 보여줘야 할 경우에 사용된다.
위의 라우트과 같이 동적 라우팅 시 사용되는 특정한 값을 얻을 수 있는 방법이 존재한다.
이때는 match 객체를 이용하면 된다. 특정한 값을 얻기 위해서는 아래와 같은 방식을 통해
값을 얻을 수 있다. (match는 Route path와 URL의 매칭에 대한 정보를 가진 객체이다.)
Route path는 매칭에 사용된 경로의 패턴(ex. /detail/:id)을 말하며 URL의 매칭에 대한 정보는 실제로 매칭된 URL 문자열(ex. /detail/1)을 말한다.
function SingleProject({match}) {
const { id } = match.params
}
// or
import { useHistory, useParams } from 'react-router-dom'
//...
const { id } = useParams()query string
query string은 정렬되거나 필터링되어 정제된 자원을 보여줘야 할 경우에 사용된다.
위의 라우트과 같이 query string값을 얻을 때는 location 객체를 이용하면 된다.
(location는 현재 경로에 대한 정보를 가진 객체로 대표적으로 location.search를 이용하여 query string 값을 가져올 수 있다.)
하지만 url은 말그대로 string형태의 데이터이기 때문에 이를 객체로 변환해줘야 한다.
이를 위해서 Web API인 URLSearchParams를 이용하면 된다.
import { useLocation } from "react-router-dom";
function useQuery() {
return new URLSearchParams(useLocation().search);
}
function QueryParamsDemo() {
const query = useQuery();
console.log(query.get("price"), query.get("name"));
}
// or
function QueryParamsDemo({location}) {
const query = new URLSearchParams(location.search);
console.log(query.get("price"), query.get("name"));
}
