데이터 반환 및 $page.data 사용하기
load에서 데이터를 반환하고 data 속성을 통해 페이지 컴포넌트에서 접근합니다.
데이터 반환 및 $page.data 사용하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
data 속성
페이지는 load 함수의 반환값으로 채워지는 특별한 data 속성을 받습니다.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>타입 안전
TypeScript를 사용하면 SvelteKit이 load에서 data까지의 타입을 자동으로 생성합니다.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>여러 속성
여러 키를 반환하고 각각 data.key로 접근합니다.
반응성
탐색할 때 data 속성이 반응적으로 업데이트됩니다. 바인딩이 다시 렌더링됩니다.
$page 스토어
$app/stores의 $page를 사용하면 어디서든 메타데이터에 접근할 수 있습니다.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>레이아웃 데이터 병합
레이아웃 load와 페이지 load가 하나의 데이터 객체로 병합되어 페이지 트리 어디서든 접근할 수 있습니다.
사용자 지정 속성
배열, 객체, 기본형, 심지어 프로미스처럼 직렬화할 수 있는 값은 무엇이든 전달할 수 있습니다. 프로미스는 스트리밍에 사용할 수 있습니다.
함수 피하기
함수는 직렬화할 수 없으므로 동작이 아닌 데이터만 반환합니다.
기본값
load가 아무것도 반환하지 않으면 data는 {}입니다.
스토어와 조합
전역에서 접근할 수 있도록 마운트 시 load 데이터로 스토어를 채울 수 있습니다.
페이지 오류
load에서 오류가 발생하면 가장 가까운 +error.svelte가 표시됩니다. data는 설정되지 않습니다.
빠른 확인
구성 요소에서 load의 반환값에 어떻게 접근합니까?
복습
data prop을 통해 로드 데이터를 받습니다. URL, 매개변수 및 라우트 정보에는 $page를 사용합니다.
자주 묻는 질문
“데이터 반환 및 $page.data 사용하기” 강의는 무료인가요?
네 — “데이터 반환 및 $page.data 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“데이터 반환 및 $page.data 사용하기”에서 뭘 배우나요?
load에서 데이터를 반환하고 data 속성을 통해 페이지 컴포넌트에서 접근합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“데이터 반환 및 $page.data 사용하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- +page.js load 함수
- 데이터 반환 및 $page.data 사용하기
- load에서 오류 처리하기
- 서버 전용 로직을 위한 +page.server.js