if, for를 html 상에서 바로 구현하는 방법

 

{#if list?.length> 0}

 

  {#each list as item ,i} 

 

  <div>{i+1}</div><div>{item.name}</div>

 

  {/each}

 

{:else}

 

<div>결과가 없습니다.</div>

 

{/if}

 

그런데 약간 아쉬운 점은

 

예를들어 {#each list as item,i}의 item 의 값을 추가로 계산해서 특정한 변수에 담아 최종 합계금액 구하는 등의 계산은

 

못한다. 아주 못하는 건 아니고 꼼수를 쓰는 방법 또는 여기에 컴포넌트를 넣어서 계산을 진행시키고 결과 값을 store나 바인팅으로 전달하는 방식을 사용할 수 있습니다. 

 

2차 3차 뭔가 더욱 복잡해진 결과와 표현을 만들어야하는 경우는 당연히 컴포넌트를 사용해야 합니다.

 

반면 단순 계산만 진행한다고한다면, 꼼수로 {@const } 사용할 수 있습니다.

 

let list =[1,2,3,4,5,6,7]

let sum =0;

 

{#each as item}

 

+{item}

//???? 이곳에서 item 의 값을 sum 에 더해줘야한다면

// 쉽게는 아래와 같이

{sum = sum+item}

 

//라고 작성하기 쉽다.

//그런데 문제는 위의 sum 이 반복적으로 화면에 출력된다는 것이다.

// 순수하게 sum 에 더하기만 하려면?

// 기존 해결방법은 이부분을 컴포넌트로 분리하여 사용하거나

// 스크립트 상에서 반복문을 한번 더 돌려줘서 더해주는 작업을 해야 했습니다.

//그런데 꼼수를 써서 간단하게 해결할 수 있습니다.

{/each}

합계 : {sum}

 

이를 해결한 꼽수 입니다.

 

//{sum = sum+item} 을 아래와 같이 @const a 라는 블록 상수에 넣어줍니다.

{@const a = sum = sum+item}

{@const} 블록 안에서만 사용되는 블록 상수로 저장하면 출력을 방지하면서 소기의 목적인

다른 변수에 저장을 할 수 있게 됩니다.