preconnect

소개

preconnect를 사용하면 리소스를 로드할 것으로 예상되는 서버에 미리 연결할 수 있어요.

preconnect("https://example.com");

preconnect는 브라우저에게 "이 서버에서 곧 데이터를 가져올 거니까 미리 연결해둬"라고 알려주는 기능이에요. DNS 조회, TCP 핸드셰이크, TLS 협상 등을 미리 해두면 실제 리소스를 요청할 때 더 빨라져요!

---

목차

• 레퍼런스
  • preconnect(href)
• 사용법
  • 렌더링 중 미리 연결하기
  • 이벤트 핸들러에서 미리 연결하기

---

레퍼런스

preconnect(href)

호스트에 미리 연결하려면, react-dom에서 preconnect 함수를 호출하세요.

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  // ...
}

아래에서 더 많은 예시를 확인해보세요.

preconnect 함수는 브라우저에게 주어진 서버에 대한 연결을 열어야 한다는 힌트를 제공해요. 브라우저가 그렇게 하기로 선택하면, 해당 서버에서 리소스를 로드하는 속도를 높일 수 있어요.

매개변수

• href: 문자열이에요. 연결하고 싶은 서버의 URL이에요.

반환값

preconnect는 아무것도 반환하지 않아요.

주의사항

• 동일한 서버에 대해 preconnect를 여러 번 호출하는 것은 한 번 호출하는 것과 같은 효과를 가져요.
• 브라우저에서는 어떤 상황에서든 preconnect를 호출할 수 있어요: 컴포넌트를 렌더링하는 동안, Effect 안에서, 이벤트 핸들러 안에서 등등.
• 서버 사이드 렌더링이나 Server Components를 렌더링할 때, preconnect는 컴포넌트를 렌더링하는 동안 또는 컴포넌트 렌더링에서 시작된 비동기 context에서 호출할 때만 효과가 있어요. 다른 모든 호출은 무시될 거예요.
• 필요한 특정 리소스를 알고 있다면, 대신 다른 함수들을 호출해서 리소스 로딩을 바로 시작할 수 있어요.
• 웹페이지 자체가 호스팅되는 서버에 미리 연결하는 것은 이점이 없어요. 힌트가 주어질 때쯤에는 이미 연결되어 있을 거니까요.

---

사용법

렌더링 중 미리 연결하기

자식들이 해당 호스트에서 외부 리소스를 로드할 것을 알고 있다면, 컴포넌트를 렌더링할 때 preconnect를 호출하세요.

import { preconnect } from 'react-dom';

function AppRoot() {
  preconnect("https://example.com");
  return ...;
}

위 예시에서:

• AppRoot 컴포넌트가 렌더링되면서 https://example.com에 미리 연결해요
• 나중에 이 도메인에서 이미지, API 데이터 등을 가져올 때 이미 연결이 설정되어 있어서 더 빨라요

실제 활용 예시:

import { preconnect } from 'react-dom';

function UserProfile() {
  // 사용자 아바타 이미지가 CDN에서 로드될 것을 알고 있으니 미리 연결
  preconnect("https://cdn.example.com");
  
  return (
    <div>
      <img src="https://cdn.example.com/avatar.jpg" alt="User avatar" />
      {/* ... */}
    </div>
  );
}

---

이벤트 핸들러에서 미리 연결하기

외부 리소스가 필요한 페이지나 state로 전환하기 전에 이벤트 핸들러에서 preconnect를 호출하세요. 새 페이지나 state를 렌더링하는 동안 호출하는 것보다 더 일찍 프로세스를 시작할 수 있어요.

import { preconnect } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preconnect('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}

위 예시에서:

• 버튼을 클릭하면 startWizard()를 실행하기 전에 http://example.com에 미리 연결해요
• 마법사가 시작되고 해당 서버에서 리소스를 가져와야 할 때, 이미 연결이 준비되어 있어서 더 빠르게 로드돼요

실제 활용 예시:

import { preconnect } from 'react-dom';

function ProductCard({ product }) {
  const handleViewDetails = () => {
    // 상세 페이지로 가기 전에 API 서버에 미리 연결
    preconnect('https://api.example.com');
    // 상세 페이지로 이동
    navigate(`/product/${product.id}`);
  };
  
  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={handleViewDetails}>View Details</button>
    </div>
  );
}

이렇게 하면 사용자가 "View Details" 버튼을 클릭하는 순간 API 서버에 연결을 시작해서, 상세 페이지가 로드될 때 더 빠르게 데이터를 가져올 수 있어요!

preconnect는 다음과 같은 경우에 특히 유용해요:

• 외부 API 서버: 다른 도메인의 API에서 데이터를 가져올 때
• CDN 리소스: 이미지, 폰트, 스타일시트가 CDN에서 로드될 때
• 서드파티 서비스: 분석, 광고, 소셜 미디어 위젯 등

주의할 점:

• 너무 많은 서버에 미리 연결하면 오히려 성능이 떨어질 수 있어요
• 실제로 사용할 서버에만 미리 연결하세요
• 웹페이지가 호스팅되는 서버에는 preconnect가 불필요해요 (이미 연결되어 있으니까요)

---

사이트맵

모든 문서 페이지 개요