[ React ] Link컴포넌트와 a태그

📌 Link컴포넌트

[ 클라이언트 사이드 렌더링 (CSR) ]

• React Router에서 Link 컴포넌트를 사용하면, 브라우저는 전체 페이지를 새로고침하지 않고 필요한 부분만 교체하여 화면을 업데이트합니다.

• SPA(Single Page Application)의 장점을 활용할 수 있습니다.

• 페이지 전환 시 네트워크 요청과 DOM 초기화 과정을 최소화하여 속도가 더 빠릅니다.

 

[ 애플리케이션 상태 유지 ]

• 페이지 이동 시 애플리케이션 상태(Redux상태, 컴포넌트의 로컬 상태 등)가 유지됩니다.

 

[ 사용자경험(UX) 개선 ]

• 페이지 전환이 바로 이루어져 끊김 없는 사용자 경험을 제공합니다.

 

 

📌 a 태그 

[ 서버 사이드 렌더링 (SSR) ]

• a 태그를 사용하면 브라우저는 페이지 이동 시 전체 HTML 파일을 다시 요청합니다. 새로운 HTML문서를 받아오고, 모든 자바스크립트와 스타일시트를 다시 로드하며, DOM 전체를 초기화힙니다.

 

[ 애플리케이션 상태 초기화 ]

• 새 페이지가 로드되므로 기존 페이지의 애플리케이션 상태는 초기화됩니다.

 

[ 느린 속도 ]

• 네트워크 요청과 전체 페이지 로드로 인해 페이지 전환 속도가 느려집니다.

 

 

📌 속도 차이의 원인

1. 클라이언트 사이드 렌더링 (CSR)

• 브라우저가 애플리케이션의 초기 HTML, CSS, JavaScript를 모두 로드한 후에는 추가 요청 없이도 빠르게 페이지를 업데이트할 수 있습니다.

• React는 DOM의 변화가 필요한 부분만 업데이트(DOM Diffing)하기 때문에 성능이 훨씬 우수합니다.

 

2. 서버 사이드 렌더링 (SSR)

• 페이지 이동 시마다 새로운 HTTP 요청이 발생하고, 서버는 전체 HTML을 다시 렌더링하여 클라이언트로 보내야합니다. 

• 이러한 과정에서 추가적인 네트워크 대기 시간이 발생합니다.

 

 

📌 React 앱 내부에서 Link 컴포넌트가 권장되는 이유

• React는 SPA로 동작하며, 한 번 로드한 애플리케이션 내에서 페이지 전환은 서버와의 통신 없이 이루어져야 최적의 성능을 낼 수 있습니다. 따라서 React 앱 내부에서 내부 Link를 만들어야할 경우에는 a태그가 아닌 Link컴포넌트를 이용하는 것이 좋습니다.

 

그렇다면, 언제 a 태그를 사용해야할까?

• 외부링크

: React 애플리케이션 외부로 연결될 경우에는 a태그를 사용하는 것이 적절합니다.

<a href="https://naver.com">Visit naver</a>

 

• SSR 및 SEO가 중요한 경우

: SEO 최적화를 위해 React와 SSR(Server-Side Rendering)을 함께 사용할 경우, a태그가 필요한 특정 시나리오가 있을 수 있습니다.

 

 

📌 예제를 통한 비교

function App() {
  return (
    <>
    <div>
      /* Link컴포넌트 */
      <Link to={"/"}>Home</Link>
      <Link to={"/new"}>New</Link>
      <Link to={"/diary"}>Diary</Link>

      /* a태그 */
      <a href="/">Home</a>
      <a href="/new">New</a>
      <a href="/diary">Diary</a>
    </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
}

 

이와 같이 Link컴포넌트와 a태그를 작성하여 화면을 렌더링 해보았습니다.

 

Link 컴포넌트

→ Link를 활용할 경우에는 필요한 컴포넌트만 교체하는 방식으로 동작하여 화면이 새롭게 리렌더링되는 것이 아니며 동작이 빠르다.

 

a 태그

→ a태그를 활용할 경우에는 전체 HTML파일을 다시 요청하기 때문에 모든 페이지가 리렌더링되며 동작이 느리다.

( 새로고침 부분이 깜빡거리면서 계속 바뀌는 것을 확인할 수 있다. )