[React] <Link>와 <a> 태그의 차이와 동작 원리

서론

React에서 페이지 이동을 처리하는 방법으로 <Link>와 <a> 태그가 있다.
둘 다 사용자의 클릭을 통해 다른 페이지로 이동하는 역할을 하지만, 동작 방식에는 큰 차이가 있다.

이번 글에서는 React의 <Link>와 <a> 태그의 차이점과, <Link>의 내부 동작 원리를 분석해보겠다.

 

1. <a> 태그와 <Link>의 차이

(1) <a> 태그란?

HTML에서 <a> 태그는 기본적인 하이퍼링크(hyperlink) 역할을 한다.
클릭하면 전체 페이지를 새로고침(F5)하며 이동한다.

<a href="/example">Example 페이지로 이동</a>

장점	단점
브라우저의 기본 기능을 그대로 사용	React 애플리케이션에서는 전체 페이지가 새로고침됨 → SPA 성능 저하
서버 측에서 렌더링(SSR)되는 페이지에서는 유용	상태(state)가 초기화됨 → 애플리케이션이 비효율적으로 동작

(2) <Link> 태그란?

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

<Link to="/example">Example 페이지로 이동</Link>

장점	단점
페이지 새로고침 없이 빠른 이동	JavaScript가 실행되지 않으면 동작하지 않음
애플리케이션의 상태(state)가 유지됨

 

2. <Link>는 어떻게 동작할까?

React Router의 <Link>는 내부적으로 window.history.pushState()를 사용하여 URL을 변경한다.
하지만 페이지를 새로고침하지 않고, 컴포넌트만 다시 렌더링한다.

기본적인 <Link>의 원리

1. <Link>를 클릭하면 to 속성에 지정된 경로로 이동
2. window.history.pushState()를 통해 브라우저 주소 변경
3. React Router는 새로운 경로에 맞는 컴포넌트를 렌더링
4. 새로고침 없이 변경된 페이지를 표시

🧐 React Router의 <Link> 는 페이지 이동을 흉내 내지만, 실제로는 새로운 페이지를 로드하지 않는다

 

3. <Link> 사용 시 주의할 점

(1) <Link> 내부에 <a> 태그를 쓰지 말 것

<Link> 내부에 <a> 태그를 쓰면 브라우저가 기본 이벤트를 실행하여 새로고침이 발생할 수 있다.

// 잘못된 사용법
<Link to="/about">
  <a>About</a>
</Link>

// 올바른 사용법
<Link to="/about">About</Link>

(2) replace 속성 사용하기

React Router의 <Link>는 기본적으로 방문 기록(history)을 쌓는다.
즉, 뒤로 가기를 하면 이전 페이지로 돌아갈 수 있다.

하지만, replace 속성을 사용하면 현재 URL을 새로운 URL로 대체하여 기록을 남기지 않는다.

<Link to="/about" replace>About</Link>

🧐 로그인 후 홈 화면으로 이동할 때 유용 (뒤로 가기 방지)

(3) <a> 태그가 필요할 때 onClick 이벤트로 막기

만약 <a> 태그를 사용해야 하지만, 새로고침을 방지하고 싶다면 event.preventDefault()를 활용할 수 있다.

이 방법을 사용할 때는 반드시 React Router의 useNavigate() 훅을 함께 사용해야 한다.

<a href="/about" onClick={(e) => {
    e.preventDefault();
    navigate("/about");
}}>
  About 페이지로 이동
</a>