useNavigate & <Link />

.일반적으로 < Link />를 사용하는데 가끔 Navigate를 사용하고 싶다는 생각이 들면, 

사용 시점과 무관하게 사용을 했는데 문득 궁금해졌다.

 

어떤 차이점이 있는지? 

사용 시점이 있을까?

 

그래서 갑자기 찾아보았다.. 🤣🤣

 

<Link/>

목적
사용자가 클릭할 수 있는 하이퍼링크 생성.
페이지를 새로고침하지 않고 애플리케이션 내의 다른 경로로 이동할 수 있다.

 

장점
● 선언적 접근 : <a/> 와 유사하게 선언적으로 라우팅을 구현할 수 있다.
● 사용용이성 : 링크를 통해 특정 경로로 이동하고자 할때 간단하게 사용할 수 있다.

단점
● 이벤트 헨들러 내에서 프로그래매틱하게 라우팅을 제어할 수 없다. 
   즉, 사용자 상호작용 또는 조건에 따라 라우팅을 동적으로 변경하는 것이 어렵다.

🔥<a />와 < Link /> 차이점

- <a/> 외부 프로젝트로 이동하는 경우

- <Link/> 프로젝트 내에서 페이지 전환하는 경우

 

** 프로그래매틱

특정 작업이나 프로세스가 코드를 통해 직접적으로 제어되고 실행되는 방식

사용시점
정적인 라우팅이 필요할 때 사용된다.
예를 들어 메뉴, 버튼 등을 사용자가 클릭 시 페이지 이동이 필요한 경우에 적합하다. 

 

useNavigate

목적
코드를 통해 라우팅을 제어할때 사용된다.
이벤트핸들러나 특정 조건 하에서 라우팅 로직을 실행 할 수 있다.

 

장점
● 유연성 : 함수를 호출해 다양한 상황에서 라우팅을 제어할 수 있다.
● 조건부 라우팅: 특정 조건이 충족될 때만 라우팅을 실행할 수 있어 로직 구현에 유연하다.

단점
● 비선언적 : 코드를 통해 명시적으로 라우팅을 제어하기 때문에 직관적으로 라우팅을 표현하는 것은 불가능하다.

 

사용시점
라우팅이 동적으로 결정되어야 할 때 사용된다,
예를 들어 폼 제출 후 결과에 따라 다른 페이지로 리다이렉트 하거나,
사용자가 특정 조건을 만족하지 못했을 때 경고 메시지를 표시 후 이전 페이지로 돌아가야 하는 경우에 유용하다.