TIL - React Router에서 navigate와 Link의 차이점

오늘은 React Router에서 navigate와 Link의 차이점과 각각을 언제 사용하는지에 대해 알아보았습니다. 이 두 방법은 React 애플리케이션 내에서 네비게이션을 처리하는 데 필수적이지만, 서로 다른 목적과 사용 사례를 가지고 있습니다.

 

 

navigate

• 목적: 주로 이벤트 핸들러나 함수 내에서 프로그래밍적으로 네비게이션할 때 사용됩니다.
• 사용 시점: 특정 조건이나 사용자 액션에 따라 네비게이션이 필요할 때, UI 요소와 직접 연결되지 않을 때 사용합니다.

예시:

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

const navigate = useNavigate();

const handleEditRecipe = () => {
  navigate(`/recipe/${recipeId}/edit`, { state: { from: location.pathname } });
};

 

폼 제출 후 사용자 리디렉션 또는 특정 이벤트에 따라 동적 네비게이션이 필요할 때 사용합니다.

 

 

Link

• 목적: 주로 JSX 내에서 선언적으로 네비게이션할 때 사용됩니다.
• 사용 시점: 애플리케이션의 UI 내에서 클릭 가능한 링크를 통해 사용자가 네비게이션할 수 있도록 할 때 사용합니다.

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

<Link to={`/recipe/${recipeId}/edit`} state={{ from: location.pathname }}>
  게시글 수정
</Link>

 

버튼이나 앵커 태그 형태로 네비게이션 링크를 제공할 때 사용합니다.

 

 

• 프로그램적 vs 선언적:
  • 동적 사용자 인터랙션이나 조건에 따라 네비게이션을 결정해야 할 때는 navigate를 사용합니다.
  • 컴포넌트의 렌더 로직 내에서 정적, 선언적 네비게이션이 필요할 때는 Link를 사용합니다.
• 상태 관리:
  • 두 방법 모두 상태를 전달할 수 있지만, navigate는 네비게이션 중 복잡한 상태 관리를 위해 더 유연합니다.
• UI 및 UX 고려사항:
  • Link는 UI의 네비게이션 요소를 만드는 데 더 적합하며, 일관된 스타일링과 동작을 보장합니다.

 

결론

React Router에서 navigate와 Link를 언제 사용해야 하는지 이해하는 것은 React 애플리케이션에서 효율적인 네비게이션 관리를 위해 중요합니다. navigate는 동적, 프로그래밍적 네비게이션에 이상적이며, Link는 UI 내에서 정적, 선언적 네비게이션에 적합합니다.