[Svelte 시리즈 2편] 컴포넌트 파일은 어떻게 읽으면 될까

이제는 .svelte 파일 하나를 완전히 이해하는 힘이 필요합니다. 짧은 문장으로 컴포넌트의 뼈대를 정리하고, 실제 코드가 어떤 순서를 따르는지 확인합니다.

이번 글에서 새로 나오는 용어

1. .svelte 파일: 스크립트·마크업·스타일을 한 문서 안에 모아둔 Svelte 전용 컴포넌트 파일입니다.
2. export let: 부모가 내려줄 값을 선언하는 구문으로, 기본값을 적어두면 빈 props에도 안전합니다.
3. 블록 구조: <script>, 마크업, <style> 영역을 뜻하며 역할을 나눠 코드를 일정한 순서로 읽게 해 줍니다.
4. 상태(state): 화면에 그릴 데이터를 담은 변수로, 값이 바뀌면 컴포넌트가 자동으로 다시 렌더링됩니다.

개념

컴포넌트는 하나의 화면 조각입니다. 같은 조각을 복사해 카드나 공지 묶음을 빠르게 만들 수 있습니다. 상태(state)는 화면에 그릴 값이며 변수나 props로 표현됩니다. 상태가 바뀌면 화면이 새로 렌더링되어 입력 반응이 빨라집니다. 블록은 Svelte 파일을 나누는 영역입니다. <script>는 로직, 마크업은 HTML 구조, <style>은 디자인을 맡아 읽는 순서를 단순하게 유지합니다.

코드

세 블록을 모두 사용하는 프로젝트 카드 예제로 기본 패턴을 익힙니다.

<script>
  export let title = "Daily Meal Checker";
  export let summary = "급식 데이터와 알레르기 정보를 한 번에";
</script>

<article class="service-card">
  <h3>{title}</h3>
  <p>{summary}</p>
  <a href="/projects/{title}" class="cta">프로토타입 열람</a>
</article>

<style>
  .service-card { border: 1px solid #eee; padding: 1rem; border-radius: 12px; }
  .cta { color: #0a7; font-weight: 600; }
</style>

읽는 순서는 간단합니다. 먼저 export let 구문으로 부모가 내려 줄 값을 확인합니다. 다음으로 마크업에서 그 값이 어디에 쓰이는지 살핍니다. 마지막으로 스타일에서 시각적 마감을 확인합니다. 이 순서를 습관화하면 나중에 페이지를 조립할 때도 길을 잃지 않습니다.

왜 중요한가

교내 데모데이 페이지처럼 반복되는 카드 레이아웃은 정확한 구조 이해가 필수입니다. 각 블록의 역할이 뚜렷하면 디자인 담당자와 개발자가 같은 파일을 함께 수정할 수 있습니다. 또한 상태 흐름을 먼저 찾는 습관은 다음 편의 props·이벤트, 이후 편의 페이지 데이터 로딩으로 자연스럽게 이어집니다.

실습

• 따라 하기: 위 예제를 작성하고 제목과 요약을 두 번 교체한다.
• 확장하기: .cta 링크에 target="_blank"를 달아 새 창 테스트를 해 본다.
• 디버깅: 제목이 비어 보이면 export let에 기본값을 넣었는지 확인한다.
• 완료 기준: 서로 다른 카드 두 개가 리스트에 정상 렌더링된다.

마무리

Svelte 컴포넌트를 읽을 때는 상태→마크업→스타일 순서를 반복적으로 점검하면 됩니다. 다음 글에서는 이 구조를 이어 props와 이벤트 전달까지 연결해 봅니다.