export

 

Svelte와 SvelteKit에서 export는 다음과 같은 두 가지 의미로 사용될 수 있습니다.

1. Svelte 컴포넌트에서의 export: 변수와 함수 공유

Svelte 컴포넌트에서 export 키워드는 해당 컴포넌트에서 사용 가능한 변수나 함수를 외부로 공개하는 역할을 합니다.

다른 Svelte 컴포넌트나 외부 모듈에서 해당 컴포넌트의 export로 공개된 항목을 가져와 사용할 수 있습니다.

 

<script>
  export let name = 'John';
  export function greet() {
    console.log('Hello, ' + name + '!');
  }
</script>

<h1>Hello, {name}!</h1>

<button on:click={greet}>Greet</button>

위의 예시 코드에서 name 변수와 greet 함수가 export로 공개되었습니다. 

이 컴포넌트를 다른 곳에서 사용할 때는 name 변수를 변경하거나 greet 함수를 호출할 수 있습니다.

 

 

2. SvelteKit 라우트 파일에서의 export: 설정과 데이터 공유

SvelteKit의 라우트 파일에서 export는 해당 라우트에 대한 설정과 데이터를 정의하는 역할을 합니다. 

export 구문을 사용하여 SvelteKit 라우트 파일에서 데이터를 불러오거나 라우트에 대한 설정을 지정할 수 있습니다.

 

// src/routes/blog/[slug].svelte
export async function load({ params }) {
  // params를 기반으로 데이터를 가져옴
  const { slug } = params;
  const response = await fetch(` https://api.example.com/blog/$ {slug}`);
  const post = await response.json();

  return {
    props: {
      post,
    },
  };
}

export function handle({ request, resolve }) {
  // 라우트 처리 중에 추가적인 작업을 수행
  console.log('Handling the request...');
  resolve(request);
}

// Svelte 컴포넌트 정의
<script>
  export let post;
</script>

<h1>{post.title}</h1>
<p>{post.content}</p>

위의 예시 코드에서 load 함수는 해당 라우트에서 필요한 데이터를 비동기적으로 가져오고, 

handle 함수는 라우트 처리 중에 추가적인 작업을 수행합니다. 

또한, export let post는 해당 Svelte 컴포넌트에서 post 변수를 외부로 공개하여 사용할 수 있도록 합니다.

export 구문은 Svelte와 SvelteKit에서 중요한 역할을 수행하는데, 

컴포넌트 간 데이터 공유 및 라우트 설정과 데이터 가져오기 등을 위해 사용됩니다.

 

 

또한, 같은 프로젝트 내에서는 모든 Svelte 컴포넌트와 SvelteKit 라우트 파일 간에 

export를 통해 변수와 함수, 설정 및 데이터를 공유할 수 있습니다. 

하지만 export된 항목을 가져와 사용하기 위해서는 적절한 import 구문을 사용하여 해당 항목을 가져와야 합니다.

즉, 프로젝트 내에서 export된 변수, 함수, 설정 및 데이터는 범위에 따라 공유가 가능하며, 

이를 통해 컴포넌트 간의 상호작용이나 라우트 간의 데이터 전달이 가능해집니다.