일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- :=
- go
- cron
- onDestory
- JavaScript
- Terraform
- golang
- Svelte LifeCycle
- nestjs
- smui
- svelte
- reactjs
- 번역
- GIT
- testing
- 도커컨테이너
- 인라인핸들러
- PostgreSQL
- react
- docker-network
- IAC
- githook
- docker
- ...$$restProps
- GraphQL
- bitwiseNot
- mock
- apiTest
- 도커
- TypeScript
Archives
- Today
- Total
목록key (1)
Den`s blog
반복 블록에서 key 를 사용하는 이유 (feat. Key 블록)
배열의 항목을 보여주고, 삭제하는 코드에 대해서 보도록 하자. Delete First Fruit ! {#each fruits as fruit} {fruit} {/each} 위와 같이 작성이 된다. 이 부분에 대해서 자세히 알아보고자 하는데, 여기서 단점이 있다. 배열의 내용이 바뀌고 할당연산자를 통해서 화면이 갱신되게 되는데 아래 동영상을 보면, 하나를 삭제할때마다 li 태그 반복내용이 전체가 바뀌게 된다. 어찌보면 당연하지만, 비효율적이다. 삭제되지 않은 것들은 새로 렌더링할 필요가 없으니 ..! 그럼 굳이 새로 렌더링 하지 않으려면 어떻게 해야 할까 ? key 를 활용하면 된다 ! Key Key 는 고유하면 되고, 추천되는 것은 String과 Number 이다. 위 예제코드에서는 배열의 각 요소 값들..
Svelte
2021. 6. 27. 15:29