프로그래머가 되는 꿈

5-2(Link,Navigate - 페이지 사이를 이동하는 방법) 본문

프론트엔드 (Front-end)/React

5-2(Link,Navigate - 페이지 사이를 이동하는 방법)

AI박사 2026. 1. 16. 15:38

[Route 끼리 쉽게 왔다갔다 하는 법을 알아보자!]

 

Link to 는 야간 <a>태그 처럼 작동한다. - 어디로 가고 싶니~? about페이지로 가고 싶어요.

라우터 간에 이동할 수 있게 , 움직일 수 있게 도와주는 링크

 

 

클릭하면

 

 

Link라는 컴포넌트로 왔다갔다 할 수 있구나!

 

링크로 이동하는 것이 아닌 내가 버튼을 통해 이동해야 할 수도 있잖아요?

이럴때 쓸수있는게 useNavigate라는 리액트 훅

 

 

 

useNavigate가 함수를 리턴해준다.

함수처럼 쓸 수 있다.

(1->4->8순서로 이)

 

함수의 파라미터 안에 내가 가고싶은 곳의 주소를 입력하면 된다. (ex. /)

-navigate(파라미터=내가 가고싶은 곳 주소) (EX./)

 

 

홈페이지를, 페이지들 끼리 왔다갔다 하는 것은 두가지 방식이 있다.

하나는 Link라는 방식, 또 하나는 useNavigate(리액트 훅)을 사용하는 방식

 

if 내가 어떤 함수 안에서 사용(써야)해야한다. 그러면 useNavigate

if 바로 버튼 누르면 함수 호출할 것 없이 바로 가면 된다. 그러면 Link to 사용해도 상관없다.

 

'프론트엔드 (Front-end) > React' 카테고리의 다른 글

RESTful Routes URL 디자인 (5-3)  (0) 2026.01.16
5-3  (0) 2026.01.16
5-1  (0) 2026.01.16
count증가/handleClick함수/useEffect/strict (3-2)  (0) 2026.01.16
리액트의 Life Cycle  (0) 2026.01.15