<Link> 컴포넌트와 <a>태그의 차이

📌 <Link> 컴포넌트

// Login.js

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

const Login = () => {
  return <Link to='/signup'>회원가입</Link>;
};

export default Login;

Link 컴포넌트의 형식을 보면 to 라는 속성에 '/signup'이라는 경로가 적혀 있는 것을 볼 수 있는데, 이를 통해 화면에서 회원가입이라는 글을 클릭하게 되면 '/signup'이라는 경로로 이동하게 되고, Route 컴포넌트의 path 값 중 일치하는 경로를 찾아 해당 컴포넌트를 화면에 그려주게 된다.

그런데 개발자도구를 통해 Link 컴포넌트로 구현한 곳을 살펴보면 a 태그로 변해있는 것을 볼 수 있다. 그렇다면 처음부터 a 태그를 사용하면 될 텐데, 왜 Link 컴포넌트를 사용하는 걸까?

📌 <Link> 컴포넌트와 <a> 태그의 차이

<a> 태그를 직접 사용할 경우

페이지 이동 시 서버로부터 매번 새로운 페이지를 요청해서 받아오게 된다. 그렇다면, 현재 화면에서 몇 가지만 바뀌어서 렌더링 되어야 하는 작업에서도 전체 화면을 매번 다시 렌더링하기 때문에 비효율적으로 동작하게 되는 것이다.

<Link> 컴포넌트를 사용할 경우

반면, <Link> 컴포넌트를 통해 변환된 a 태그는 실제 서버에 요청을 보내지 않고, 단지 url만 변경된다. 그래서 url의 변경을 react-router-dom이 인지하고, 실제 화면에서 바뀌어야 하는 부분만 새로 렌더링되기 때문에 a 태그를 직접 사용하는 것보다 효율적이다.

📌 <a> 태그를 사용해야 할 때

그렇다고 <a> 태그를 절대 사용하지 않아야 하는 건 아니다.
애플리케이션 내부에서 url을 통해 페이지를 전환해야 할 때는 Link 컴포넌트를 이용해 효율적으로 이동할 수 있지만, 외부 사이트로 이동할 때는 항상 전체 페이지를 새로 받아와야 하기 때문에 <a> 태그를 사용해야 한다. 예를 들어, 아래 사진과 같이 페이지 안에서 instagram이나 blog로 이동해야 하는 경우에는 <a> 태그를 사용해야 한다.