[React] useNavigate, useLocation, useParams 설명 및 차이

- 프로젝트를 진행하며 Navigate, Params, Location을 각각 사용해 보았는데 정작 왜 사용하는지에 대해서는 대답을 할 수 없었고

- 개별적으로 Hook에 대한 정보나 내용들을 정리해보려고 한다.

 

useNavigate Hook

• useNavigate 훅의 리턴값은 함수
• 페이지를 이동시키는 함수를 반환한다.
• 인자값으로 정수값을 넣어주면 앞 뒤 경로로 탐색할 수 있다

const navigate = useNaviate();

<button onClick={navigate("/")}> 홈으로 이동하기 </button>
<button onClick={navigate(-1)}> 뒤로가기 </button>
<button onClick={navigate(-2)}> 뒤로 2페이지 가기 </button>
<button onClick={navigate(1)}> 앞으로 </button>

 

useLocation Hook

 

• useLocation 은 경로 정보를 담고 있는 객체를 리턴한다.

{
	hash: '',
	key: 'default'
	pathname: '/test/1',
	search: '',
	state: null,
}

• .location 객체 내에 담겨있는 프로퍼티
• pathname: 현재 경로의 값 ( router의 Link를 사용하여 직접 적어준 pathname )
• search: 현재 경로의 query parameter 값 ( /test/1 )
• state: 현재 경로로 보내진 Link의 state
• key: 해당 Location의 key값

 

useParams Hook

• useParams 은 해당 하는 경로로 이동 했을 때 /:id 에 해당하는 값을 받아오는 query string을 작성

// 이전 페이지 

const id = test;

<Link>
<img src={`142.111.23.4.52${id}}` />
</Link>

// 현재 페이지
const parms = useParams();
console.log(parms);
console.log(parms.id);

// 결과
// 1.
{
	id: "test"
}
// 2.
test

 

정리를 하자면

• useNavigate는 url을 변경하려는 함수를 반환
• useLocation은 현재 경로의 정보, 이전 페이지에서 받아올 수 있는 값
• useParams는 현재 파라미터의 정보, 현재 페이지의 값 정도로 생각하면 될 것 같다.