[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 21일차 - 리액트(3)

 

1️⃣ useParams

👉 React Router의 useParams는 현재 URL의 파라미터를 가져올 수 있는 React Hook입니다.

👉 예시

import React from 'react';
import { useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();

  return <h2>User ID: {id}</h2>;
}

👉 /user/:id와 같은 경로가 있을 때, :id는 URL에서 동적으로 변경되는 값으로 취급된다. 이 :id를 쉽게 가져오기 위해 useParams를 사용할 수 있다. 

👉 User 컴포넌트가 /user/123라는 경로에서 렌더링될 경우, useParams를 통해 { id: "123}라는 객체를 얻게 된다. 

👉 특정 라우트에 연결된 컴포넌트가 URL의 특정 부분에 따라 다르게 동작하도록 만드는데 이용된다.

 

2️⃣ useNavigate

👉 React Router v6에서 도입된 Hook으로서, 앱 내에서의 탐색을 쉽게 도와주는 역할을 한다. 

👉 애플리케이션의 다른 위치로 이동하기 위한 방법을 제공한다. 이 함수를 호출하면 애플리케이션 경로를 쉽게 변경할 수 있다. 이로써 코드가 더 간결해지고, 개발자가 의도한 바를 더 명확하게 표현할 수 있다.

👉 상대 경로를 지원한다. 특히 중첩된 라우트 구조에서 유용하다. 예를 들어, '/home/profile'에서 상위 경로 ('/home')로 이동하려면 'navigate('..')을 사용할 수 있다.

👉 state 전달 기능: useNavigate는 네비게이션 시 추가적인 state를 전달하는 기능을 제공한다. 이를 통해 이전 경로에 대한 정보를 유지하거나, 새로운 경로에 필요한 정보를 전달할 수 있다. 예를 들어) 특정 페이지에서 사용자의 작업을 중단하고 로그인 페이지로 이동해야 하는 상황이 발생하면 로그인이 완료되면 사용자의 원래의 페이지로 다시 리디렉션할 때 사용한다. 

 

👉 예시(기본)

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

function Component() {
  const navigate = useNavigate();
	
  // button누르면 somewhere로 이동  
  return (
    <button onClick={() => navigate('/somewhere')}>
      Go somewhere
    </button>
  );
}

 

👉 다른 예시

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

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

  return (
    <button 
      onClick={() => navigate('/somewhere', { state: { from: 'Component' } })}
    >
      Go somewhere
    </button>
  );
}

👉 navigate 함수는 두 번째 인자로 state 객체를 받을 수 있다. 이 state 객체는 탐색 후에 해당경로에서 useLocation을 통해 접근할 수 있다. 이 기능은 이전 경로로부터 추가적인 정보를 전달하거나 전달받아야 하는 경우 유용하다.

 

 

3️⃣ useLocation

👉 React Router의 Hook 중 하나로, 현재 URL에 대한 정보를 알려준다. 현재 브라우저의 URL 정보를 객체로 받아올 수 있다.

👉 속성

1️⃣ pathname: 현재 위치의 경로 이름이다.

2️⃣ search: URL에서 "?" 뒤에 붙는 쿼리 문자열이다. (예: "?sort=asc")

3️⃣ hash: URL에서 "#"뒤에 붙는 해시갑이다. (예: "#section1")

4️⃣ state: "useNavigate"를 통해 전달된 state 객체이다.

 

👉 예시

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

function Component() {
  const location = useLocation();
  
  useEffect(() => {
    //이전 컴포넌트에서 전달받은 정보를 출력
    console.log(location.state.from); 
  }, [location]);

}

👉 이런 식으로 이전 경로로부터 추가적인 정보를 받아오는 데 "useLocation"을 사용할 수 있다.

 

 

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.