[React🩵] a 태그와 Link 태그

a태그는 기본적으로 코드 실행 시 브라우저가 전체 페이지를 새로고침 하게 된다(전통적인 방식)

이는 앱의 State가 초기화되는 문제가 발생할 수 있다

<a href="https://example.com">이동하기</a>

 

 

하지만 요즘은 SPA(Single Page Application) 방식 = JS를 이용해서 페이지를 동적으로 변경하는 방식이 일반적이다

이때 Link 태그를 사용하면 브라우저의 새로고침 없이 페이지 전환이 가능하다

import Link from 'next/link';

function Home() {
  return (
    <div>
      <Link href="/about">About 페이지로 이동</Link>
    </div>
  );
}

export default Home;

 

구분	a 태그	Link 태그
기본동작	페이지를 새로고침하여 이동	새로고침없이 클라이언트 사이드에서 전환
상태유지	초기화됨	유지됨
속도	전체 새로고침 되므로 상대적으로 느림	새로고침이 없으므로 빠름
사용환경	모든 HTML 페이지	React, Next.js 같은 SPA

 

 

 

그럼 언제 a태그를 사용할까?

1.  외부 링크로 이동할 때(완전히 새 탭에서 열릴 때)

<a href="https://google.com" target="_blank" rel="noopener noreferrer">구글로 이동</a>

 

 

2.  일반적인 HTMl 페이지에서 단순히 이동이 필요할 때

<a href="/contact">연락처 페이지</a>