[React] <Link>와 <a>의 차이점을 알아보자 _react-router-dom

 

리액트에서 <Link>컴포넌트와 <a>태그의 차이점은 무엇일까?

 

react에서 a 태그와 Link 컴포넌트는 링크를 생성하고 페이지를 전환할 때 사용됩니다. 그런데 이 두 접근 방식은 서로 다른 용법을 갖고 있습니다. 이번 포스팅에서는 a 태그와 Link 컴포넌트의 차이점에 대해 설명하고, 각각의 장단점과 어떤 상황에서 사용해야 하는지에 대해 알아보도록 할게요 🧐

 

 

---

 

🍊 <a> 태그란? 

<a>태그는 HTML에서 하이퍼링크를 생성하는 태그로 다른 웹 페이지, 문서, 이미지, 동영상 등 다양한 리소스에 대한 링크를 생성할 수 있습니다. 사용자가 클릭하면 해당 링크가 이동하거나 특정 동작을 수행하게 됩니다.

 

 

📍 <a> 태그 사용법

<a href="https://tthinks.tistory.com">a태그란 by 3o14</a>

 

웹 페이지에서 <a> 태그를 클릭하면 브라우저는 해당 링크의 주소로 이동하며, 새로운 페이지를 불러옵니다. 이로 인해 SPA처럼 단일 페이지 애플리케이션에서 갖고 있는 상태와 컴포넌트가 초기화되고, 새로운 페이지를 렌더링해야 합니다.

 

🖐🏻 여기서 잠깐 SPA란?
SPA란, Single Page Application의 약자로, 리액트는 이 SPA로 사이트를 구축하기 위한 프레임워크입니다. SPA는 단일 URL을 가지며, 애플리케이션 실행에 필요한 HTML 페이지와 JavaScript, CSS 등의 자산을 로드하는 방식으로 작동합니다. SPA는 페이지를 새로 불러오는 대신 업데이트하는 방식으로 동작하여 상태를 유지하고 속도를 향상시킵니다.

 

 

📍 <a> 태그의 문제점

• 상태(state)가 초기화된다.
• 속도와 효율이 떨어진다.

<a> 태그를 사용하여 페이지를 새로고침하면 앱이 가지고 있는 상태가 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 다시 렌더링되어야 합니다. 이로 인해 위 두 가지의 문제점이 생겨버립니다.

 

 

 

---

 

🍊 <Link> 컴포넌트

Link 컴포넌트는 리액트 라우터에서 제공하는 페이지 전환을 위한 컴포넌트입니다.

 

 

📍 <Link> 컴포넌트 사용법

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

리액트에서 페이지 전환 시에는 <a> 태그 대신 Link 컴포넌트를 사용하는 것이 권장됩니다. Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지 자체를 새로고침하지 않습니다.

 

 

📍 <Link> 컴포넌트를 사용해야 하는 이유

<a> 태그의 href를 사용하여 페이지를 이동할 때는 페이지를 새로 불러오기 때문에 상태 값이 유지되지 않고 속도도 저하됩니다. 반면에 Link 컴포넌트는 페이지 전환 시에는 애플리케이션 상태를 유지한 상태에서 주소만 변경합니다. 따라서 컴포넌트의 상태가 초기화되지 않고 필요한 정보를 유지할 수 있습니다.

 

 

 

 

---

 

🍊 요약 - <Link> 컴포넌트를 사용해야 한다 👀

• 리액트에서는 Link 컴포넌트를 사용하여 페이지 전환을 처리하는 것을 권장한다.
• 이를 통해 SPA의 장점인 상태 유지와 빠른 속도를 활용할 수 있다.