✅ Query란?
Query란 질문 또는 문의라는 뜻을 내포하고 있다.
컴퓨터과학에서 말하는 Query는 DB에서, 원하는 내용을 검색하기 위해, code나 key를 기초로 질문하는 행위를 의미한다.
질문하는 행위 자체를 Query라고 한다면, 질문의 형식을 Query String이라 명명한다.
?key=value&key=value&... 이 형식 자체가 쿼리로 연결된 문자열이기에 Query String이라고 부르는 것이다. 쿼리 스트링을 구성하는 key=value를 Query Parameter라고 부르고, 많은 hook에서는 params라는 명칭으로 사용된다.
✅ useLocation이란?
useLocation은 React Router에서 제공하는 hook으로서, current location object를 반환한다.
이때 current location object란, 현재 URL 경로에 대한 정보를 담고 있는 객체를 의미한다.
✅ useParams란?
useParams는 'Route Path'에 의해 설정된, 현재 URL의 Dynamic Params Object를 반환하는 React Router의 hook이다.
'현재 URL의 Dynamic Params Object'란 다른 게 아니라, 앞에서 언급한 key와 value로 구성된 Query Parameter들의 집합(= 그런데 이제 객체 형태인)을 의미한다.
✅ useSearchParams란?
useSearchParams는 current location에 대한 URL의 Query String을 read & modify하는 데 사용되는 React Router의 hook이다.
useSearchParams는 two values로 구성된 하나의 array를 반환한다.
two values는 current location의 search params와 A function으로 구성된다.
search params는 곧 query string을 의미한다. 그리고 해당 hook을 통해 주어지는 함수로 search params를 update 할 수 있다.
useState에서 state를 setState 함수로 update하는 것과 동일한 논리를 취한다. 실제로 React Router 공식문서에서도 useState와 비교하며 useSearchParams에 대해 설명을 이어간다.
✅ 회고
최근, 가수 윤종신 님이 한 인터뷰에서 "깨달음은 늦는 맛이에요. 늦어야 바뀌죠."라는 통찰을 비췄다.
오늘 찾아본 내용은, 사실 예전에 한 번 학습한 바 있다. 그때도 나름 최선을 다했고 이해했다고 생각했지만, 깨달음이 오늘에서야 찾아왔다는 느낌을 받았다. 색을 덧칠한 것이다.
내 도화지의 색이 연하다고 두려워하지 않아도 되겠다. 도화지는 2차원이지만, 깨달음은 여러 번의 덧칠이고 정말 얇은 3차원이라고 볼 수도 있겠다. 오늘 무슨 선택을 했든, 당연히 의미가 있는 것이다. 내일도 파이팅 하자!
