[25.02.11 화요일]
개인과제 제출 마감기한이 지나고 해설 영상을 확인 하던중, 내가 정확하게 모르고 그냥 사용한 부분이 있음을 알게 되었다.
Link와 Navigate
코딩을 하면서 후반부에 의문이 생기긴 했지만, 일단 구현이 목적이었기 때문에 넘어갔던 부분이다.
리액트에서 사용하는 Link와 Navigate에 대해 다시 한 번 확인하고 넘어가도록 하자!
🔗 Link
React-Router-Dom에서 제공하는 컴포넌트로, 설치가 필요하다.Link컴포넌트를 사용하여 사용자가 클릭하면 다른 페이지(컴포넌트)로 이동할 수 있게 해준다.- 클릭만 하면 이동하기 때문에, 다른 연산과정 없이 페이지를 이동할 때 사용된다.
- 개발자 도구에서는
<a>태그로 보인다. - 페이지 이동시 전체 페이지를 새로고침하지 않고 필요한 부분만 리랜더링한다.
✅ 예: 페이지 이동
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
📌<Link>와 <a> 의 차이점
✅ <a>
- 브라우저 주소를 이동시키고 페이지 자체를 새로고침한다.(전체 페이지를 리랜더링)
- 외부 페이지와 연결할 때 주로 사용.
✅ <Link>
- SPA구현시에 사용되며, React Router가 필요한 부분만 리랜더링한다.
- 프로젝트내에서 페이지(컴포넌트) 전환 시 주로 사용.
📍 useNavigate
React-Router-Dom에서 제공하는 훅으로, 설치가 필요하다.- 특정 로직을 처리한 후 자동으로 페이지를 이동시키거나, 사용자가 특정 행동을 했을 때 페이지를 변경하는 경우 사용한다.
- 조건이 필요한 곳에서 navigate 함수를 호출해서 페이지 이동.
✅ 예: 로그인 폼 제출시 특정 페이지로 이동
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
function handleSubmit(event) {
event.preventDefault();
// 로그인 처리 후 대시보드 페이지로 이동
navigate('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button type="submit">Log In</button>
</form>
);
}- Link는 사용자가 클릭시 바로 페이지를 이동하는 로직구현에 사용.
- useNavigate는 페이지 전환 시 처리해야하는 조건 로직이 있을 경우 사용.
one setp