svelte #each문 안에서 변수 저장하기 꼼수

임종필·2023년 2월 13일
0

이런 꼼수들은 찾아도 잘 안나오고
생각도 잘 안나는 것이라서 다시 찾아볼 수 있어 적어 본다.


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} 블록 안에서만 사용되는 블록 상수로 저장하면 출력을 방지하면서 소기의 목적인
다른 변수에 저장을 할 수 있게 된다.

profile
프롭테크 프로그래머

0개의 댓글