[React] useLocation 훅 이해하기

• useLocation훅은 현재 url의 위치 정보를 반환한다.

 

• 이 정보에는 경로명, 검색, 해시 등 다양한 url관련 정보가 표시된다. 

 

• useSearchParams 클래스: url의 쿼리 문자열을 쉽게 파싱하고 조작할 수 있는 웹 API이다. 얘를 통해서 쿼리 파라미터를 추출하고 값을 읽거나 설정할 수 있다. 

 

 

<useLocation 작동 원리>

1) const location = useLocation();
2) const queryParams = new URLSearchParams(location.search);
3) const release_date = queryParams.get('release_date'); //이때 이제 release_date를 가져오게 되는 것이다.

 

 

1) useLocation을 사용해서 현재 url의 위치 정보를 얻는다. 

 

const location = useLocation();
여기서 location 객체는 현재의 url정보를 포함한다. 

예를 들어서 url이 'http://example.com/movie/Inception?release_date=2010-07-16'인 경우, location 객체는 다음과 같은 정보를 포함한다.

{
  "pathname":"/movie/Inception",
  "search" : "?release_date = 2010-07-16",
  "hash": "",

....기타 정보들...
}

 

2) location.search를 사용하여 쿼리 문자열을 얻는다.

 

const queryParams = new URLSearchParams(location.search);

여기서 location.search는 url의 쿼리 문자열 부분을 포함한다. 
URLSearchParams 생성자에다가 location.search를 전달하여  'queryParams' 객체를 생성하는 것이다. 

 

3) queryParams.get('release_date')를 사용하여 특정 쿼리 파라미터 값을 추가한다. 

 

const release_date = queryParams.get('release_date');
여기서 queryParams.get('release_date')는 'release_date' 파라미터의 값을 반환한다.