React 10. useNavigate, useParams, useLoaction

📑 useNavigate

• 페이지 간의 이동할 때 사용
• JavaScript의 history.push history.replace 같은 기능을 수행

const navigate = useNavigate();

const handleClick = () => {
	navigate('/path/url');
}

useNavigate / Link to 차이점

- useNavigate

• 코드 로직 내에서 특정 상황에 따라 동적으로 경로를 변경하고 싶을 때 사용
• 사용자가 어떤 액션을 수행한 후에 다른 경로로 이동

const navigate = useNavigate();

// 로그인 버튼 클릭 시
const LoginBtn = () => {
	if (isSignUp) {				// 회원가입이 되어 있을 경우 
    	navigate('/main');
    } else {					// 가입이 안 되어 있을 경우
    	navigate('/signup');
    }
}

- Link to

• 링크를 생성하고 클릭 시 바로 해당 경로로 이동
• 애플리케이션의 상태를 유지하면서 빠르고 부드러운 네비게이션 경험을 제공
• Link의 onClick 속성은 링크를 클릭 시 추가적인 자바스크립트 로직을 실행
  • 링크의 경로 이동을 막으려면 preventDefault 메소드를 호출해야 함

---

📑 useParams

• 현재 URL의 경로 매개변수에 액세스할 수 있음
• URL이 '/user/:id' 형태일 때 id 매개 변수에 액세스할 수 있습니다.
• 동적 경로 파라미터에 접근해야 하는 경우 사용
• 반드시 동적 경로 매개변수가 있는 라우트 컴포넌트 내에서 사용되어야 함
  (정적 경로에서는 빈 객체가 나옴)

// main.jsx
<Route path='/movie/:movieid' element={<Moive />} />

// Movie.jsx
const { movieid } = useParams();

---

📑 useLoaction

• 현재 URL의 상태에 대한 정보를 가져올 수 있음
• 전체 URL 경로에 대한 정보가 필요한 경우 사용
• 훅이 반환하는 location 객체를 직접 수정해서는 안 됨
• location 객체의 값을 변경하려면 대신 useNavigate를 사용하여 새로운 상태를 가진 경로로 이동

  pathname : 현재 경로
  search : 쿼리 매개변수
  hash : URL 해시
  state : Link 컴포넌트의 state로 전달된 상태 값

// URL -> http://localhost:3000/main?page=1

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

function SearchPage() {
  const location = useLocation();
  console.log(location);	// {pathname: '/main', search: '?page=1', hash: '', state: null}
  
  // 도메인뒤의 URL경로
  console.log(location.pathname)	// '/main'
  
  // 쿼리스트링 가져오기
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('page')
  console.log(query)	// '1'
}

• URLSearchParams : URL의 쿼리 스트링을 해석하고 다루는 API, 쿼리 스트링 값을 쉽게 가져올 수 있음