99 반복문 key 값에 관한 고찰..

source: categories/study/vue-experiance/vue-experiance_9-99.md

99 반복문 key 값에 관한 고찰..

• vue key 속성

key 값이 필요한 이유?

• 리액트든 뷰든 반복문을 작성하면 해당 컴포넌트 또는 요소에 key 값을 부여해야된다.
• 이는 리액트, 뷰가 변경 사항을 알아내는 것을 돕기 위해서이다.

뷰, 리액트?

• 뷰, 리액트는 UI를 만들어내는 라이브러리로 화면의 view를 담당한다.
• 그리고 컴포넌트 기반으로 되어있어 컴포넌트의 조합으로 원하는 UI를 만들어내거나 특정 컴포넌트를 원하는 만큼 보여주기 편리하다는 장점이 있다.
• 무엇보다 Virtual DOM을 이용해 화면에서 변경이 필요한 부분만 변경하기 때문에 효율성이 좋아 속도가 빠르다.

뷰, 리액트는 항상 효율성이 좋을까?

• 그렇지는 않다.

• 변경이 필요한 부분만 변경할 수 있을 때 효율이 좋은 것이다.

• 리액트, 뷰는 state를 사용해 변경 사항이 있는 부분을 재렌더링 하는데, 만약 불필요한 재렌더링이 자주 발생하게되면 효율적이지 않다.
• 그래서 리액트, 뷰가 변경된 부분을 쉽게 알아차릴 수 있도록 key가 필요하다.

<li>a: apple</li>
<li>b: banana</li>
<li>c: cantaloupe</li>

• 예를 들어, 화면에 위와 같은 코드로 작성된 내용이 보여지고 있는데, 중간에 banana가 삭제되었다.
• 이 상황에서 key가 없다면 리스트를 순차적으로 모두 비교해서 차이가 있는 부분을 찾아내야 한다.
• 그런데 리스트의 아이템마다 부여된 고유 값인 key가 있다면 리액트, 뷰가 자동으로 key를 어떤 컴포넌트를 업데이트할지 판단하는데에 사용하기 때문에 빠른 판단을 할 수 있다.

• key를 이용해 기존에 있던 key가 없어졌다면 해당 아이템을 삭제하고 기존에 없던 key가 생기면 새 아이템을 만든다.

• 리액트, 뷰 공식 홈페이지의 key 항목을 살펴보면 동적인 리스트를 만들 때마다 적절한 key를 할당할 것을 강력하게 권고하고 있다.

• 또한, key로 사용할만한 항목이 없을 경우 데이터의 재구성까지 고려해보길 권유한다.

• 반복문의 두번째 인자로 배열의 인덱스를 넘겨 사용할 수도 있지만, 이는 성능 향상에 도움이 되는 실질적인 key 값이 되지 못하기 때문에 추천되지 않는 방법이다.