beeimp
BeeImp
beeimp
전체 방문자
오늘
어제
  • 분류 전체보기 (110)
    • Program_Language (17)
      • Python (13)
      • Go (0)
      • JavaScript (4)
      • TypeScript (0)
      • Rust (0)
      • Solidity (0)
    • OS (8)
      • UNIX&LINUX (7)
      • Windows (0)
      • MacOS (1)
    • Front-End (19)
      • Svelte (19)
      • React (0)
    • Blockchain (6)
      • Bitcoin (0)
      • Ethereum (1)
      • Klaytn (0)
      • Project (5)
    • Data Structure&Algorithm (11)
      • Greedy (7)
      • Dynamic Programming (1)
      • Sort (0)
      • DFS & BFS (2)
      • Recursive (1)
    • Security (0)
      • SDP (0)
      • Authentication (0)
    • Network (3)
      • OpenWrt (0)
      • SDN&NFV (1)
    • Git (5)
    • IT_News (0)
    • 베타 학습단 (12)
      • SQL (12)
    • Project (1)
    • Issues (1)
    • Reviews (3)
    • I Learned (23)
      • TIL (23)
      • WIL (0)
    • Other (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascript
  • 기초
  • 탐욕법
  • Docker
  • Ethereum
  • PYTHON
  • solidity
  • 블록체인
  • sql
  • mysql
  • react
  • Nest.js
  • svelte
  • typescript
  • Git
  • jenkins
  • ubuntu
  • blockchain
  • greedy
  • github

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
beeimp

BeeImp

Front-End/Svelte

03_Svelte_Props

2021. 7. 15. 23:28

Props

Declaring props

지금까지 내부 상태(주어진 컴포넌트 내에서만 값을 액세스)만을 다뤘습니다.

실제 애플리케이션에서는 한 컴포넌트에서 하위 컴포넌트로 데이터를 전달해야 합니다. 이를 위해 일반적으로 'props'로 줄여진 속성을 선언해야 합니다. Svelte에서는 export 키워드로 이 작업을 수행합니다.

<script>
  export let answer;
</script>
마치 `$:` 처럼, 처음에는 이질감이 느껴지실 수 있습니다. JavaScript 모듈에서는 일반적으로 이러한 방식으로 내보내기가 작동하지 않습니다. 일단 이렇게 작성하다 보면 익숙해지실거에요!😂

Default Values

Svelte는 props의 기본값을 쉽게 지정할 수 있습니다.

<script>
  export let answer = "a mystery"; // 기본값 선언
</script>

이제 answer prop이 없이 두 번째 구성 요소를 추가하면 다시 기본값으로 돌아갑니다.

<Nested answer="{42}" />

<Nested />

Spread Props

속성 개체가 있는 경우 속성 개체를 각각 지정하는 대신 컴포넌트로 'spread'할 수 있습니다.

<Info {...pkg} />
반대로 내보내기로 선언되지 않은 props를 포함하여 컴포넌트로 전달된 모든 props를 참조해야 하는 경우 '$$prop' 에 직접 액세스하여 이를 수행할 수 있습니다.
Svelte가 최적화하기 어렵기 때문에 일반적으로 권장하지 않지만,
어떤 경우에는 유용합니다.
<!-- App.svelte -->
<script>
  import Info from "./Info.svelte";

  const pkg = {
    name: "svelte",
    version: 3,
    speed: "blazing",
    website: "https://svelte.dev",
  };
</script>

<!-- <Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/> -->
<Info {...pkg} />
<!-- Info.svelte -->
<script>
  export let name;
  export let version;
  export let speed;
  export let website;
</script>

<p>
  The <code>{name}</code> package is {speed} fast. Download version {version}
  from <a href="https://www.npmjs.com/package/{name}">npm</a> and
  <a href="{website}">learn more here</a>
</p>

참조

  • https://svelte.dev/tutorial/declaring-props

'Front-End > Svelte' 카테고리의 다른 글

05_Svelte_Events  (0) 2021.07.17
04_Svelte_Logic  (0) 2021.07.15
02_Svelte_Reactivity  (0) 2021.07.15
01_Svelte_소개  (0) 2021.07.14
00_Svelte_시작  (0) 2021.07.14
    'Front-End/Svelte' 카테고리의 다른 글
    • 05_Svelte_Events
    • 04_Svelte_Logic
    • 02_Svelte_Reactivity
    • 01_Svelte_소개

    티스토리툴바