본문 바로가기
Svelte

Svelte - 고유키를 통한 데이터 변경 확인

by 올엠 2022. 4. 26.
반응형

Svelte는  데이터가 추가되거나 삭제되었을 때에만 새롭게 화면을 렌더링 되는데,

현재 화면의 데이터가 변경되었다는 것을 인식시켜, 새롭게 랜더링하는 작업을 고유키를 통해서 설정이 가능하다.

여기에 고유키라는 값을 설정하여 해당 값이 변경된것을 확인할 수 있다.

아래와 같이 items를 구성할 경우 고유키를 설정하지 않을 경우 데이터 변경 유무를 확인 할 수 없는 필드가 발생할 수 있다. 

{#each items as {id, title, content}, i}
	title, content
{/each}

고유키는 () 소괄호를 이용해서 고유키를 설정할 수 있는데, 바로 {#each items as {id, title, content}, i 부분에 ()를 이용해서 고유키를 설정할 값을 지정하자. 예제에서는 데이터 구분이 없기 때문에 id값 자체를 고유키로 설정하면 된다.

{#each items as {id, title, content}, i (id)}
	title, content
{/each}

 

 

 

반응형