컴포넌트 기초 — .svelte 파일 하나로 끝내는 UI 단위

<script>
  // 1. 로직 — 변수, 함수, import 등
  let name = $state('Svelte');
</script>

<!-- 2. 마크업 — HTML 템플릿 -->
<p>안녕하세요, {name}님!</p>

<!-- 3. 스타일 — 스코프 CSS -->
<style>
  p {
    font-size: 1.2rem;
    color: #333;
  }
</style>

<!-- App.svelte -->
<script>
  // 컴포넌트를 import해서 사용합니다
  import Greeting from './Greeting.svelte';
  import UserCard from './UserCard.svelte';
</script>

<Greeting />
<UserCard />

<script>
  let name = $state('세계');
  let items = $state([1, 2, 3]);

  function getGreeting() {
    return '안녕하세요';
  }
</script>

<!-- 변수 -->
<p>{name}</p>

<!-- 함수 호출 -->
<p>{getGreeting()}</p>

<!-- 표현식 -->
<p>아이템 수: {items.length}</p>
<p>대문자: {name.toUpperCase()}</p>

<!-- 삼항 연산자 -->
<p>{items.length > 0 ? '있음' : '없음'}</p>

<script>
  let src = $state('/images/profile.png');
  let alt = $state('프로필 사진');
  let isActive = $state(true);
</script>

<!-- 일반 속성 바인딩 -->
<img {src} {alt} />

<!-- 변수명과 속성명이 같으면 단축 표기 가능 -->
<!-- 위 코드는 src={src} alt={alt}와 동일합니다 -->

<!-- 동적 클래스 -->
<div class={isActive ? 'active' : 'inactive'}>
  상태 표시
</div>

<!-- Button.svelte -->
<script>
  let { label, variant = 'primary' } = $props();
</script>

<button class="btn btn-{variant}">
  {label}
</button>

<style>
  .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; }
  .btn-primary { background: #ff3e00; color: white; }
  .btn-secondary { background: #666; color: white; }
</style>

<!-- App.svelte -->
<script>
  import Button from './Button.svelte';
</script>

<Button label="저장" />
<Button label="취소" variant="secondary" />

<script>
  import Home from './Home.svelte';
  import About from './About.svelte';
  import Contact from './Contact.svelte';

  // 조건에 따라 다른 컴포넌트를 렌더링합니다
  const pages = { home: Home, about: About, contact: Contact };
  let currentPage = $state('home');
</script>

<!-- svelte:component로 동적 렌더링 -->
<svelte:component this={pages[currentPage]} />

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<p>부모의 텍스트</p>
<Child />

<style>
  /* 이 스타일은 Parent의 <p>에만 적용됩니다 */
  /* Child 안의 <p>에는 영향을 주지 않습니다 */
  p {
    color: red;
  }
</style>

<style>
  /* 전역 스타일 */
  :global(body) {
    margin: 0;
    font-family: sans-serif;
  }

  /* 이 컴포넌트 내부의 .active만 전역으로 */
  .wrapper :global(.active) {
    background: yellow;
  }
</style>