[vue.js] 컴포넌트/엘리먼트 re-rendering 하는 법

Vue 프로젝트에서 컴포넌트, 혹은 HTML 엘리먼트를 re-rendering하는 방법

1. Purpose

이번에 진행한 프로젝트의 경우 여러 개의 작품들을 전시하는 서비스였는데, 크게 2가지 카테고리로 분류되며 각 카테고리에는 여러 작품들이 포함되었다. 각 카테고리 별로 작품을 구분하며 카테고리 이름을 클릭하면 해당 카테고리 내의 작품들의 목록이 나타나는 형식이었는데, 어떤 경우 작품들의 목록이 제대로 업데이트되지 않는 경우가 발생하였다. 분명 화면에 표시되는 목록들의 정보가 저장되어 있는 Array의 데이터는 업데이트가 제대로 되었는데, HTML 엘리먼트들이 업데이트되지 않았다. 이를 해결하기 위해 Vue 내에서 특정 상황에 HTML 요소를 업데이트할 수 있는 방법을 찾아보게 되었다.

2. Usage

정말 간단하다! 각 element(혹은 component)에 key 값을 바인딩해주면 된다. Vue에서는 HTML 요소의 key 값이 변경되는 경우 해당 요소를 업데이트한다. 아래 예시를 통해 조금 더 직관적으로 이해해보자.

1. lst 라는 Array에는 작품의 이름들이 저장되어 있으며, v-for 를 통해 각 작품들의 이름이 화면에 표시된다고 가정하자.

    <!-- HTML -->
    <!-- lst = ['a1', 'a2', 'a3']; -->
    <div>
      <template v-for="a in lst"> {{ a }} </template>
    </div>

2. 이때, lst = ['b1', 'b2', b3'] 라는 명령어를 통해 lst 의 값을 새로 할당했다고 하자. 분명 JavaScript 내에서의 lst 값은 변경되었지만, 화면의 HTML 엘리먼트의 경우 이전의 lst 값을 가지고 화면을 렌더링하였기 때문에 그 값이 바뀌지 않는다.

3. 이때, 코드가 아래와 같이 바뀌었다고 가정하자. 1번의 코드에서 :key 만 추가된 것이다.

    <div>
      <template v-for="a in lst" :key="a"> {{ a }} </template>
    </div>

4. 위와 같이 코드를 수정한 경우 2번을 통해 lst 값이 업데이트된 경우, key 값 역시 업데이트 되었기 때문에 업데이트된 lst 값에 맞춰서 화면의 요소들도 re-rendering 된다.

예시가 복잡할 뿐이지 이해만 한다면 정말정말 간단한 방법이다! 첫번째 Reference의 경우 Vue Router에서의 parameter 변화에 따라 화면을 업데이트하는 여러 방법을 소개하는데, 각 방법의 장단점도 설명해주는만큼 Vue에 정말 관심이 많다면 한 번쯤 읽어보는 것을 추천한다 :)

3. Reference

1. Best Practice for Reacting to Params Changes with Vue Router [link]
2. The correct way to force Vue to re-render a component [link]