[React] Link to="" vs <a href=""> 차이점과 오류 해결 방법 (with Router)

STUDY/React

[React] Link to="" vs <a href=""> 차이점과 오류 해결 방법 (with Router)

1juyoung 2025. 6. 20. 14:17

React에서 페이지 이동을 구현할 때 두 가지 방법이 있다.

하나는 Link to="", 다른 하나는 <a href="">를 사용하는 것이다.

둘 다 링크를 통해 페이지를 이동하는 역할을 하지만, 동작 방식에는 중요한 차이가 있다.

이번 글에서는 Link to=""와 <a href="">의 차이점을 알아보고,

React 프로젝트에서 Link를 사용할 때 발생하는 오류의 원인과 해결 방법까지 함께 살펴보자!

1. Link to="" vs <a href=""> 차이점

1-1. <a href=""> 태그: 일반적인 HTML 방식

우리가 일반적으로 알고 있는 <a> 태그는 HTML에서 링크를 연결하는 기본적인 방법이다.

<a href="/about">About 페이지로 이동</a>

이렇게 작성하면 브라우저가 해당 페이지로 이동하면서 전체 페이지가 새로고침된다.

즉, 새로운 요청을 보내 서버에서 새로운 HTML 파일을 받아와 렌더링하는 방식이다.

이 방식은 정적인 웹사이트에서는 문제가 없지만, React 같은 SPA(Single Page Application) 환경에서는 비효율적이다.

페이지 이동이 발생할 때마다 전체 애플리케이션을 다시 불러오기 때문에 불필요한 리렌더링과 성능 저하가 발생할 수 있다.

1-2. Link to="": React Router 방식

React에서는 <a> 태그 대신 react-router-dom 라이브러리에서 제공하는 Link를 사용한다.

jsx
복사편집
import { Link } from "react-router-dom";

<Link to="/about">About 페이지로 이동</Link>

이렇게 작성하면 주소(URL)만 변경되고, 기존 컴포넌트가 유지된 상태에서 필요한 부분만 다시 렌더링된다.

즉, 새로운 요청 없이 클라이언트 측에서 동적으로 페이지를 변경하는 방식이다.

정리하자면?

구분 <a href=""> Link to=""

방식	브라우저가 전체 페이지 새로고침	클라이언트 측에서 URL만 변경
성능	불필요한 리렌더링 발생	필요한 부분만 렌더링 (SPA 최적화)
사용 예	정적인 HTML, 서버 사이드 렌더링(SSR)	React SPA 프로젝트

2. Link 사용 시 발생할 수 있는 오류와 해결 방법

React 프로젝트에서 Link를 사용할 때, 특정 상황에서 오류가 발생할 수 있다.

대표적으로 "Cannot destructure property 'basename' of 'React.useContext(...)' as it is null" 에러가 나타날 수 있다.

이 오류는 Link가 Router 컴포넌트 내부에서 사용되지 않을 때 발생한다.

즉, Link를 사용하려면 반드시 BrowserRouter 또는 Router로 감싸야 한다!

⚠️ 잘못된 코드 (오류 발생)

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

function Header() {
  return (
    <div>
      <Link to="/">홈</Link>
    </div>
  );
}

이렇게 작성하면 Link가 라우터 컨텍스트 없이 사용되었기 때문에 오류가 발생한다.

✨ 올바른 코드 (Router로 감싸기)

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Header from "./components/Header";

function App() {
  return (
    <Router>
      <Header /> {/* Router 안에서 사용해야 오류가 발생하지 않음! */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

이렇게 Router 내부에서 Link를 사용하면 오류 없이 정상적으로 동작한다.

3. 결론: 언제 Link를 쓰고, 언제 <a>를 써야 할까?

상황 Link to="" 사용 <a href=""> 사용

React Router로 페이지 이동할 때	✅	❌
외부 사이트로 이동할 때 (ex. Google, GitHub)	❌	✅
전체 페이지 새로고침이 필요한 경우	❌	✅

React 프로젝트에서 내부 페이지를 이동할 때는 Link to=""를 사용하자!
외부 사이트로 이동할 때는 <a href="">를 사용하면 된다.

React 프로젝트에서 Link를 올바르게 사용하면 페이지 이동이 빠르고 부드러워지며, 불필요한 리렌더링을 방지할 수 있다.