Svelte

Svelte - Logic

2020. 12. 26. 22:57
๋ชฉ์ฐจ
  1. ๐Ÿ“Œ ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Logic - if
  4. ๐Ÿ“Œ Logic - else
  5. ๐Ÿ“Œ Logic - else if
  6. ๐Ÿ“Œ Conclusion
  7. ๐Ÿ“Œ Reference
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ ๋ชฉ๋ก

  • Introduction
  • Logic - if
  • Logic - else
  • Logic - else if
  • Conclusion
  • Reference

๐Ÿ“Œ Introduction

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ svelte์—์„œ ์–ด๋–ป๊ฒŒ if, else if, else ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Logic - if

๋จผ์ € ๊ฐ„๋‹จํ•˜๊ฒŒ if์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์„ ์–ธ์„ ํ• ์ˆ˜ ์žˆ์–ด์š”.

{#if}
{/if}

๊ทธ๋Ÿผ ์ด์ œ ํ•œ๋ฒˆ ๊ฐ„๋‹จํ•˜๊ฒŒ count๊ฐ€ ์ง์ˆ˜ ์ผ๋•Œ count is even์ด๋ผ๋Š” ๋ฌธ๊ตฌ๋ฅผ ์ถœ๋ ฅํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count % 2 === 0}
  <div>count is even</div>
{/if}

<button on:click={onClickPlus}>PLUS</button

๐Ÿ“Œ Logic - else

๊ทธ๋Ÿผ ์ด์ œ else์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๊ณ˜์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ•์€ ์ด๋ ‡์Šต๋‹ˆ๋‹ค.

{#if}
{:else}โญ๏ธ
{/if}
<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count % 2 === 0}
  <div>count is even</div>
{:else}
  <div>count is odd</div>
{/if}

<button on:click={onClickPlus}>PLUS</button>

๐Ÿ“Œ Logic - else if

else if ๋„ ๋น„๊ต์  ์‰ฌ์›Œ์š”

{#if}
{:else if} โญ๏ธ
{:else}
{/if}

๊ทธ๋Ÿผ ์ด์ œ ํ•œ๋ฒˆ ์‚ฌ์šฉํ•ด๋ณผ๊นŒ์š”?

<script>
  let count = 0;

  const onClickPlus = () => {
    count++;
  };
</script>

<h1>COUNT: {count}</h1>
{#if count === 0}
  <div>count is zero</div>
{:else if count % 2}
  <div>count is odd</div>
{:else}
  <div>count is even</div>
{/if}

<button on:click={onClickPlus}>PLUS</button>

๐Ÿ“Œ Conclusion

vue์˜ v-if๋‚˜ v-else-if์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ๋น„์Šทํ•˜๊ฒŒ ๋”ฐ์˜จ๊ฑฐ ๊ฐ™์•„์„œ ๋„ˆ๋ฌด ๊ธฐ๋ถ„์ด ์ข‹์€๊ฑฐ ๊ฐ™์•„์š”. react์ ์œผ๋กœ ํ’€์–ด๋‚ผ์ˆ˜๋„ ์žˆ์—ˆ๊ฒ ์ง€๋งŒ vue์ฒ˜๋Ÿผ ๋ญ”๊ฐ€ ์ข€๋” ์ง๊ด€์ ์ธ ํ‚ค์›Œ๋“œ๊ฐ€ ์žˆ์–ด ๊ฐ€๋…์„ฑ๋„ ์ข€๋” ์ข‹์•„์ง„๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋‹ค์Œ ์‹œ๊ฐ„์—๋Š” ์ด์ œ v-for์™€ ๊ฐ™์€ ๊ฒƒ์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณผ๊ฒŒ์š”. ๊ทธ๋Ÿผ ์•ˆ๋…•!

๐Ÿ“Œ Reference

  • svelte tutorial
๋ฐ˜์‘ํ˜•

'Svelte' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Svelte - Await Block  (0) 2020.12.27
Svelte - Iteration  (0) 2020.12.26
Svelte - Props  (0) 2020.12.26
Svelte - Reactivity  (0) 2020.12.26
Svelte - Basic  (0) 2020.12.26
  1. ๐Ÿ“Œ ๋ชฉ๋ก
  2. ๐Ÿ“Œ Introduction
  3. ๐Ÿ“Œ Logic - if
  4. ๐Ÿ“Œ Logic - else
  5. ๐Ÿ“Œ Logic - else if
  6. ๐Ÿ“Œ Conclusion
  7. ๐Ÿ“Œ Reference
'Svelte' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • Svelte - Await Block
  • Svelte - Iteration
  • Svelte - Props
  • Svelte - Reactivity
eddie0329
eddie0329
Front-end Developer
๋ฐ˜์‘ํ˜•
eddie0329
Eddie Sunny's Blog
eddie0329
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (100)
    • Summary of Book (0)
    • Vue Study (11)
    • Vue TDD (9)
    • Vue BDD (5)
    • Design Pattern (9)
    • Javascript Study (3)
    • React Study (15)
    • React TDD (1)
    • Vue Storybook (2)
    • Refactoring (0)
    • Graphql_Apollo (3)
    • Svelte (8)
    • Open Source (1)
    • D3 (4)
    • Typescript (1)
    • CSS (2)
    • Android (0)
    • Java (0)
    • Kotlin (0)
    • ์žก๋‹ด (0)
    • Swift (19)
    • Rust (2)
    • ํšŒ์‚ฌ์ด์•ผ๊ธฐ (2)
    • ReactNative Study (2)
    • Vitest (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • Home

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • svelte
  • swift5
  • swift
  • Vue test
  • Design Pattern
  • react useRef
  • vue tdd
  • Vue
  • TypeScript
  • BDD
  • vue3
  • Kotlin
  • jest
  • CSS
  • vue storybook
  • storybook6
  • D3
  • react-component-slot
  • Javascript
  • client only
  • TDD
  • slot ํŒจํ„ด
  • apollo
  • Nextjs
  • vue bdd
  • vue cypress
  • javascript pattern
  • React Native
  • react
  • Cypress

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
eddie0329
Svelte - Logic
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.