커뮤니T | Link와 useNavigate

프로젝트를 진행하면서 페이지간 경로를 이동시켜줄 때

어떤상황에 각각을 써줘야하는지 헷갈리고 모르겠어서 찾아보고 정리하게 되었다

 

Link 사용

Link 컴포넌트는 보통 정적 네비게이션(클릭으로 페이지 이동)을 위해 사용된다

 

장점

• HTML 표준 준수 : Link는 태그로 렌더링되며, 검색 엔진과 접근성 도구가 링크를 올바르게 인식할 수 있다
• 코드 가독성 : JSX 내에서 라우트 목적지와 함께 컴포넌트 구조를 명확하게 유지할 수 있다
• 간단한 클릭 이벤트 : 단순한 라우트 이동만 필요할 때 사용하기 좋다

 

추천 사용 사례

• 네비게이션 메뉴 : 상단 메뉴나 사이드바 메뉴처럼 간단한 경로 이동이 필요한 경우
• 페이지 내부 링크 : 사용자가 UI상에서 클릭하여 다른 페이지로 이동해야 할 때

 

예시

<Link to="/sign-in">로그인</Link>

 

---

useNavigate 사용

useNavigate는 동적 이동(특정 이벤트 처리 후 경로 이동) 또는 프로그래밍 방식으로 경로를 변경할 때 유용하다

 

장점

• 이벤트 기반 네비게이션 : 버튼 클릭, 폼 제출, 조건에 따른 이동 등 특정 이벤트가 발생했을 때 이동할 수 있다
• 라우트 이동 시 옵션 설정 : replace 옵션을 추가하여 히스토리 기록을 덮어쓰는 등 다양한 설정이 가능하다
• 비동기 처리 : 예를 들어, 로그인 검증이 완료된 후 이동해야 할 경우, useNavigate를 사용하면 검증 로직과 함께 라우트 이동을 관리할 수 있다

 

추천 사용 사례

• 폼 제출 후 이동 : 사용자가 폼을 제출한 뒤 다음 페이지로 이동해야 할 때
• 버튼 클릭 기반 이벤트 : UI 요소가 로 처리하기 어렵거나 조건부 이동이 필요한 경우
• 조건부 이동 : 로그인 상태에 따라 특정 페이지로 리디렉션하는 등의 조건이 필요할 때

 

예시

const navigate = useNavigate();

const handleButtonClick = () => {
  if (isAuthenticated) {
    navigate('/home');
  } else {
    navigate('/sign-in');
  }
};

 

---

replace : true 옵션에 대해

replace :true 옵션은 navigate 함수가 현재 히스토리의 페이지 기록을 덮어쓰도록 함

이 옵션을 사용하면 새 경로로 이동해도 이전 페이지가 브라우저의 뒤로가기 히스토리에 저장되지 않으므로, 사용자가 뒤로가기 버튼을 눌렀을 때 이전 페이지로 돌아가지 않게 된다

예시

navigate('/sign-in', { replace: true });

위 코드의 repalce: true는 /sign-in으로 이동하면서 이전 페이지 기록을 덮어쓰는 것을 의미

즉, 사용자가 '로그인' 버튼을 클릭한 후 뒤로 가기를 누르면, /sign-in 이전의 페이지로 돌아갈 수 없게 된다

이 기능은 로그아웃이나 폼 제출 후 결과 페이지로 이동할 때처럼, 이전 페이지로 돌아가는 것이 불필요한 경우에 주로 사용됨

 

---

결론

• 정적 이동이 필요한 경우 - Link
• 동적 이동이 필요한 경우 - useNavigate

가 적합하다!