useLocation()의 사용이유와 window.location과 차이점

차이점에 앞서 두 가지 기능의 개념부터 설명해 보자면 다음과 같다.

1. useLocation()란?

useLocation 훅은 React Router 라이브러리중 하나로 현재 위치에 정보 객체를 반환한다.

이 위치 객체에는 현재 URL에 대한 정보를 포함하며 컴포넌트가 현재 경로, 검색 문자열, 해시, 상태 등의 정보에 접근할 수 있다

예시)

⭐ useLocation 특징

1. 위치 객체화 반환 : 현재 경로와 관련된 정보가 포함된 객체를 반환
2. 경로 변경 감지: 경로가 변경될 때마다 해당 컴포넌트 리렌더링 
3. 쉬운 사용성 : React 컴포넌트 내에서 간단하게 사용 가능

위치 객체의 속성

• pathname: 현재 URL의 경로 부분 (예: /home).
• search: URL의 쿼리 문자열 부분(예: ?query=search).
• hash: URL의 해시 부분(예: #section1).
• state: navigate 함수로 이동할 때 전달한 상태 객체.

---

2. window.location

아래의 명령어를 통해 다음과 같은 정보를 가져올 수 있다.

• window.location.href : 전체 URL 문자열
• window.location.protocol : 마지막 ':'를 포함한 프로토콜 정보
• window.location.host : URL의 호스트 정보를 가져오는데 만약 URL에 포트번호가 있으면 ':'과 포트번호를 포함 (아래 예시 참고)
• window.location.hostname : URL의 호스트명이며 이 값은 ':'과 포트번호를 포함하지 않는다.

예제)

"https://pspp103-jhn.tistory.com/category/STUDY/REACT"의 경우
URL에 포트번호를 포함하지 않기 때문에 window.location.host와 window.location.hostname이 같다.

만약 URL이 'https://pspp103-jhn.tistory.com:3000/category/STUDY/REACT'의 경우
window.location.host는 " pspp103-jhn.tistory.com:3000"이 되고,
window.location.hostname은 " pspp103-jhn.tistory.com"이 됩니다.

• window.location.port: URL의 포트 번호
• window.location.pathname : hostname 뒤의 '/'문자 뒤의 경로
• window.location.search: '?' 뒤의 쿼리스트링을 가져온다

---

⭐ 3. React에서 차이점

아래의 특징들이 react에서 두가지 기능중에 상황에 따라 어떤것을 사용하여야 하는지 기준이라고 본다.

1. React 상태 관리 및 리렌더링:

• window.location.pathname을 직접 사용하는 경우, React 컴포넌트는 경로가 변경되었음을 인식하지 못한다!
  이는 React의 상태 변화에 따른 리렌더링 메커니즘을 우회하기 때문이라고 한다.
•  
• 반면 useLocation 훅은 React Router의 상태와 통합되어 있어서 경로가 변경될 때마다 React가 자동으로 컴포넌트를 리렌더링하여 변경된 경로를 반영한다.

2. React 생태계와의 통합:

• window.location.pathname은 React 생태계와 별개로 동작하며, React 컴포넌트가 변경 사항을 감지하고 리렌더링하지 않는다.
• useLocation은 React Router의 일부로 변경 사항을 쉽게 추적하고 반영이 가능하다.

3. 재사용성 및 가독성:

• useLocation 훅을 사용하면 경로 변경을 더 쉽게 추적하고, useEffect 훅을 사용하여 경로 변경 시 특정 작업이 가능하여 가독성과 유지보수성을 높여준다.