[vue3] v-for 무한 렌더링

<AgGridSample v-for="agGrid in agGrids" :key="agGrid.id" @grid-ready="onGridReady"></AgGridSample>

위 코드에서

const newAgGrid = { id: newId };
this.agGrids.push(newAgGrid);

agGrids에 데이터를 넣어 주었을 때 무한루프가 발생하여 컴포넌트가 여러개 추가되었습니다.

 

컴포넌트의 재랜더링을 방지하기 위해 적절한 key 값을 설정해야 합니다.

<div v-for="agGrid in agGrids" :key="agGrid.id">
	<AgGridSample @grid-ready="onGridReady"></AgGridSample>
</div>​

v-for문을 컴포넌트에 직접 걸면 해당 코드가 컴포넌트로 대체 될 때 key속성이 사라지기 때문에 이렇게 div로 감싸서 key를 사용해야합니다.