쿼리스트링

쿼리 스트링은 url주소의 뒤에 붙은 '?'뒤의 문자열인데 주소창에 함께 전달할 수 있는 데이터라고 보면 된다. 주로 GET요청시에 많이 쓰이는 방법이고 ?key=value 와 같은 형식을 가지며 2개 이상이면 구분자로 '&'를 사용한다.

쿼리스트링 값을 주소창에 보이게 하는 방식은 여러 곳에서 쉽게 볼 수 있고 사용자의 입력 데이터를 전달하거나 가져올 리소스들을 정렬, 필터링하여 가져오는데 사용한다.
단 url에 그대로 정보가 보여지기 때문에 보안에는 취약하다고 한다.

useHistory

useHistory는 url주소를 변경시킬 때 사용한다. url주소를 변경시켜서 그 주소와 일치하는 Route의 컴포넌트가 렌더링 되도록 한다.

const history = useHistory()

history에는 history객체가 할당되었다. history객체는 다양한 프로퍼티와 메서드들을 포함하고 있다.

• length - (number) 히스토리 스택 전체의 길이
• action - (string) 현재 액션 (PUSH, REPLACE, or POP)
• location - (object) 현재 위치
  • search - (string) url 쿼리 스트링
  • hash - (string) url 해시 조각
  • state - (string) location이 스택에 push되었을 때 제공되는 특정한 state. 브라우저와 메모리 히스토리에서만 사용된다.
  • pathname - (string) url경로
• push(path, [state]) - (function) 히스토리 스택에 새로운 항목을 넣는다.
• replace(path, [state]) - (function) 현재 항목으로 히스토리 스택을 교체. push와 비슷하지만 히스토리를 아예 교체한다는 점이 다르다. (뒤로가기가 허용되지 않는다.)
• go(n) - (function) 스택에서 n번째 항목으로 포인터를 이동.
• goBack() - (function) 뒤로가기
• goForward() - (function) 앞으로 가기
• block(prompt) - (function) 이동을 막는다.

push,replace할 때 데이터 넘기기

history의 push, replace는 경로를 넘겨주는 것 말고도 state와 location을 사용해서
경로를 변경하는 것과 함께 state에 어떠한 정보, 데이터를 같이 보내줄 수 있다.

history.push('/blog')

이렇게하면 일반적으로 경로만 스택에 넣어준다.

history.push('/blog', { fromPopup: true })

history객체의 location에 있는 state값은 기본이 null인데 이렇게 하면 state에 객체가 들어간다.

history.push({
	pathname: '/blog',
  	search: '?id=5',
  	hash: '#react',
  	state: { fromPopup : true }
})

이런식으로 아예 구분짓지않고 객체를 통으로 넘기는 것도 가능하다. state까지 한번에 포함시켜서 전달한다. 이렇게 하면 데이터를 url에 보여주지 않고 넘길 수 있다.

useLocation

useLocation은 location객체를 가지고 있는데 대충 이런식으로 생겼다.

history객체에 있는 location과 매우 유사하게 생겼다. 하지만 현재 url의 정보가 궁금하다면 항상 useLocation의 location객체안의 내용을 봐야한다.

왜냐하면 문서에 따르면 history객체는 화면이 이동할 때 변할 수 있기 때문에 history.location보다 location객체를 사용하는 것이 정확하다.

URLSearchParams

url에서 쿼리 스트링 값을 가져오거나 수정할 때 URLSearchParams을 쓰면 편하다.

const queryParams = new URLSearchParams(location.search);

이렇게 파라미터로 location.search를 넘겨서 인스턴스를 반환하게 한다.

위의 코드에서는 .get()으로 'sort'라는 매개변수(key)를 넣고 불러와지는 값이 'asc'와 같은지 확인한 것.

그리고 history에 값을 넣을 때 조건부로 체크해서 동적으로 값을 주고 버튼 텍스트도 마찬가지로 isSortingAscending에서 반환되는 true, false를 가지고 조건부로 렌더링했다.

URLSearchParams는 다른 내장된 메서드들이 많아서 목적에 맞게 쓰면 된다.
👉 더 많은 메서드&사용법 참고