useLocation, useNavigate 훅

(useLocation, useNavigate에 대한 설명은 12월 4일에 했으나, 해당 부분의 영상이 날아가서, 따로 복습하기 위해 작성한 글)

 

Q1.

React를 공부중에 있는데, useNavigate() 훅과 useLocation()훅에 대해서 배우고 있었어. 그런데 다른 훅들과 달리, 저 2개의 훅은 상대적으로 기능이 단순한 것 같아. 그래서 내가 배운게 맞는지 확인하고자 해.

 

useNavigate()훅은,

현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL에, 파라미터로 받은 문자열로 변조해주는 것이고,

useLocation()훅은,

현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL 정보를 가져오는 훅인 것이지?

 

내가 질문한 내용에 부족한 점이 있다면 보충해주고, 답변은 존댓말로 작성해줘.

 

 

 

A1.

ChatGPT

2초 동안 Thought about useNavigate()와 useLocation() 훅

 

네, 질문하신 내용의 이해는 전반적으로 맞으시지만, 몇 가지 보완할 점이 있습니다.

useNavigate() 훅은 react-router-dom에서 제공하는 훅으로서, 컴포넌트 내부에서 프로그래밍적으로 페이지 이동(네비게이션)을 수행할 수 있는 함수를 반환합니다. 단순히 URL을 문자열로 치환하는 것보다는, 리액트 라우터 히스토리 스택을 활용하여 뒤로가기, 앞으로가기, 특정 경로로 이동 등을 프로그램 로직에 따라 실행할 수 있게 해줍니다. 예를 들어:

 

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const goToHome = () => {
    navigate('/home');
  };

  return <button onClick={goToHome}>홈으로 가기</button>;
}

 

이렇게 navigate() 함수를 통해 페이지 이동이 가능합니다.

useLocation() 훅은 현재 브라우저에 렌더링 중인 페이지의 위치 정보(location 객체)를 반환합니다. 이 때 location 객체는 단순히 현재 URL 문자열만 포함하는 것이 아니라, 다음과 같은 정보를 포함합니다.

• pathname: 현재 경로 (예: /home)
• search: 쿼리 문자열 (예: ?id=123)
• hash: URL 해시 부분 (예: #section1)
• state: 네비게이션 시 전달한 상태값(주로 navigate 함수의 두 번째 인자로 전달)
• key: 특정 히스토리 항목을 식별하는 키 값

예를 들어:

import { useLocation } from 'react-router-dom';

function LocationDisplay() {
  const location = useLocation();
  
  console.log(location.pathname); // 현재 경로를 콘솔에 출력
  return <div>현재 경로: {location.pathname}</div>;
}

 

정리하자면,

• useNavigate(): 코드를 통해 브라우저 히스토리를 조작하고 라우팅을 수행할 수 있게 해주는 훅입니다.
• useLocation(): 현재 렌더링 중인 위치 정보(경로, 쿼리, 해시, 상태 등)를 가져올 수 있는 훅입니다.

말씀하신 내용과 큰 틀은 맞지만, useNavigate() 훅은 단순한 URL 변조 이상의 기능(브라우저 히스토리 스택 조작)을 제공하며, useLocation() 훅은 단순히 URL 문자열을 가져오는 것 이상으로 다양한 location 객체 정보를 취급한다는 점을 보완해드렸습니다.

 

 

 

Q2.

나의 말:

알려줘서 고마워. 그런데 다른 훅들에 비해서 사용 난이도는 낮은 것 같네. 결국 useNavigate는, 코드 진행에 따라서 url 변조를 하고, 그 변조 과정을 기록으로 남겨서, 뒤로가기나 새로고침등에도 대응할 수 있게 해줄 뿐인 훅이라는 소리고, useLocation은 현재 URL에 대한 이런 저런 정보들을 객체로 접근할 수 있게 해줄 뿐인 훅이라는 설명 아니야?

 

 

 

A2.

ChatGPT

1초 동안 Thought about useNavigate and useLocation

 

네, 요약해주신 내용 또한 크게 틀리지 않습니다. 다만 다음과 같이 조금 더 명확히 정리할 수 있습니다.

• useNavigate():
  특정 로직(이벤트 핸들러나 컴포넌트 로직)에서 프로그래밍적으로 URL을 변경하여 페이지 전환을 수행할 수 있도록 돕는 훅입니다. 이렇게 바뀐 URL은 브라우저 히스토리에 기록되기 때문에, 뒤로가기나 앞으로가기, 새로고침 등에도 정상적으로 대응할 수 있게 됩니다.
• useLocation():
  현재 활성화된 페이지(또는 라우트)에 대한 위치 정보(경로명, 검색 쿼리, 해시, 상태값 등)를 객체 형태로 쉽게 접근할 수 있게 해주는 훅입니다. 이를 통해 UI나 로직에서 현재 어디에 있는지, 어떤 상태값을 가졌는지 등에 따른 조건부 렌더링이나 로직 분기를 수행할 수 있습니다.

말씀하신 대로, 다른 복잡한 훅들에 비해 사용 난이도가 크게 높지는 않지만, 이 훅들이 제공하는 기능은 리액트 라우팅 구현에 있어서 매우 핵심적인 역할을 담당한다는 점을 기억해주시면 좋겠습니다.

 

 

내가 정리한 내용(강사님께 확인받느라, 자꾸 확인받으려 한다고 한 말씀도 들었지롱)

useLocation -> 현재 리엑트 페이지를 렌더링중인 페이지의 URL에 대한 정보를 가져오는 훅,
useNavigate -> 프로그래밍적으로 페이지 이동을 전달받은 파라미터를 통해 수행할 수 있게 해주는 훅