Svelte 5 - @attach 기능 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Svelte 개발자, Svelte 5 도입을 고려하는 프론트엔드 개발자

난이도: 중급 (Svelte 기초 지식 필수)

핵심 요약

• {@attach}는 이펙트($effect) 내에서 실행되며 자동 정리 함수(teardown)와 반응형 상태 업데이트를 지원
• use: 지시어와 달리 컴포넌트에도 적용 가능하며 팩토리 패턴을 통해 파라미터 정의 가능
• fromAction 유틸리티로 기존 액션 함수를 @attach 형식으로 전환 가능

섹션별 세부 요약

###1. use: 지시어의 한계

• 외부 라이브러리 매개변수 전달 문법이 모호
• 액션 리턴 값이 업데이트 함수/정리 함수를 포함한 객체로 복잡
• 업데이트 로직을 수동으로 구현해야 함

###2. @attach 기능의 핵심 특징

• DOM 마운트 시 어태치먼트 함수 호출
• 정리 함수 리턴하여 자동 해제
• 반응형 상태 변경 시 자동 재호출 (update() 함수 불필요)

###3. 팩토리 패턴 활용 예시

```javascript

function tooltip(content) {

return (node) => {

const tp = tippy(node, {content});

return tp.destroy;

};

}

```

• 단일 인자만 받는 어태치먼트 함수로 외부 라이브러리 매개변수 전달 가능

###4. 기존 액션 전환 유틸리티

```javascript

import { fromAction } from 'svelte/attachments';

```

• fromAction 유틸리티로 기존 use: 액션을 @attach 형식으로 변환 가능

###5. 라이프사이클 호출 순서

1. $effect.root (컴포넌트 로드 시)
2. $effect.pre (DOM 업데이트 전)
3. @attach (onMount보다 먼저)
4. onMount
5. $effect (onMount 순서에 따라 이펙트 실행)

결론

• @attach는 이펙트 기반의 자동 정리/업데이트 기능으로 반응형 UI 개선 가능
• 외부 라이브러리와의 호환성을 위해 팩토리 패턴 또는 fromAction 유틸리티 사용 권장
• 컴포넌트 내 어태치먼트 적용 시 $props()로 노드 지정 필요 (자식 컴포넌트에서 처리)