무엇
preconnect는 곧 리소스를 받아올 서버에 미리 연결을 열어 두게 하는 API다. 실제로 무언가를 내려받기 전에 연결부터 맺어, 연결 설정에 드는 시간을 아낀다.
인자는 연결할 서버의 URL인 href다(옵션으로 crossOrigin을 줄 수 있다). 반환값은 없다.
import { preconnect } from 'react-dom'
preconnect('https://example.com')
무슨 일이 일어나나
preconnect는 브라우저에 "이 서버로 연결을 열어 두라"는 힌트만 준다. 특정 리소스를 받는 게 아니라 연결만 미리 맺는다. 이 점이 preload와 다르다. preload는 정해진 리소스를 곧바로 내려받는다. 어떤 리소스인지 이미 안다면 preconnect 대신 그것을 바로 받는 API를 쓰는 편이 낫다.
같은 서버로 여러 번 불러도 한 번 부른 것과 같다. 브라우저가 힌트를 무시하고 연결을 안 열 수도 있다. 페이지 자신이 올라온 서버로는 preconnect해도 이득이 없다. 힌트를 줄 시점엔 이미 연결돼 있기 때문이다. 서버 렌더링에서는 렌더 중(또는 렌더에서 파생된 비동기 맥락)의 호출만 동작하고 나머지는 무시된다.
사용법
리소스의 정확한 주소는 아직 몰라도, 어느 서버에서 받을지 아는 경우 그 서버로 미리 연결을 연다.
import { preconnect } from 'react-dom'
export function Gallery() {
// 곧 이 CDN에서 이미지를 받을 예정 — 연결을 미리 연다
preconnect('https://images.example-cdn.com')
return <ImageGrid />
}
실무 예시
사용자가 다음 단계로 갈 낌새가 보일 때, 그 단계에서 리소스를 받을 서버로 이벤트 핸들러에서 미리 연결을 여는 패턴이다.
import { preconnect } from 'react-dom'
export function CallToAction({ startWizard }: { startWizard: () => void }) {
const onClick = () => {
// 마법사 화면이 쓸 외부 서버로 미리 연결
preconnect('https://example.com')
startWizard()
}
return <button onClick={onClick}>시작</button>
}
왜 중요한가
React 19 리소스 힌트 중 가장 가벼운 축이다. 리소스가 아니라 연결만 다루는 미세 최적화라, 직접 쓸 일은 거의 없고 보통 프레임워크가 알아서 처리한다. 외부 CDN이나 API 서버로 붙는 지연을 조금이라도 줄여야 하는 특수한 경우에만 손이 가는 도구다.
Reference