[React] 파라미터,쿼리

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

파라미터: /profiles/velopert
쿼리: /about?details=true

react에서 파라미터값을 받는 방법
1.Link로 파라미터값을 보냈을때.

<Route exact path='/main/notice/detail/:idx' component={NoticeItem} />

해당 페이지에서 확인 방법.
useParams()
=> path parameter의 정보를 얻을 수 있는 hooks

1. const {idx} = useParams();
2. const idx = props.match.params.idx

react에서 쿼리 값을 받는 방법
1.window.location
2.URLSearchParams
URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의합니다.
3.useLocation
사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks

1.window.location + qs
라이브러리 npm i qs
쿼리 스트링을 객체로 변환해주는 라이브러리

const queryData = QueryString.parse(window.location.search, { ignoreQueryPrefix: true });
const queryname = queryData.{queryName} 

2.URLSearchParams

const params = new URLSearchParams(window.location.search);
const mode = params.get('mode');

3.useLocation + query-string

const { search } = useLocation(); 
const { type } = queryString.parse(search);