[SVELTE] context="module"

<script context="module">
    let totalComponents = 0;

    // this allows an importer to do e.g.
    // `import Example, { alertTotal } from './Example.svelte'`
    export function alertTotal() {
        alert(totalComponents);
    }
</script>

<script>
    totalComponents += 1;
    console.log(`total number of times this component has been created: ${totalComponents}`);
</script>

<script context="module"> 태그는 모든 컴포넌트가 인스턴스되었을 때 실행되는 것이 아닌 처음 script를 읽혔을 때 실행 됩니다. 보통의 script태그와 마찬가지로 변수를 선언 가능합니다.

context="module" 속성을 가진 script 내부에서 export 키워드를 통하여, 모듈을 방출 할 수 있으며 컴파일 되었을 때, 모듈화 됩니다.

export default는 사용 할 수 없습니다. 이유는 해당 파일에서 기본 방출 되는 것은 스벨트 컴포넌트이기 때문입니다.

Note : <script context="module"> 에서는 반응성을 구현 할 수 없습니다. 만약 다양한 컴포넌트에서 반응성을 필요로 한다면 store를 생성하는 것을 고려하세요 .