2022-01-08

Vue.js로 개발 시 성능 이슈에 대한 두 번째 이야기를 하려 한다.

회사 프로젝트 개발 도중에 API로 받은 데이터를 표출하는 데 굉장히 오래걸렸던 적이 있었다.

API 실행 자체는 오래걸리지 않았기에 렌더링에 문제가 있을거라 생각했고,

구글링을 해보니 원인은 '__ob__' 프로퍼티가 있는 데이터들이었다.

이 프로퍼티는 Vuex에 Mutation할 데이터가 리스트나 객체일 경우

그걸 그대로 할당해버릴 때 생긴다고 한다.

리스트의 경우 다음과 같이 되어버린다.

export default createStore({
    state: {
    	data: null
    },
    mutation: {
    	SET_DATA: (state, newData) => state.data = newData	// [1, 2, 3]
    },
    ...
});

console.log($store.state.data);

위의 두 이미지는 실제로 진행했던 프로젝트의 개선 전의 모습이다.