메모리 낭비 최소화하기

Virtual Scroll 💫

스크롤된 위치를 계산해 그 위치에 해당하는 DOM만 그려주는 원리

Infinity Scroll 과 무엇이 다를까?

무한 스크롤으로 밑으로 내려가면 밑에 있는 DOM을 구현하는 방법도 있지만,
밑으로 내려가면 상위 데이터는 계속 남아있는 것이라
스크롤 위치에 해당하는 dom만 그리는 것이 더 좋음 !

v-once 💫

첫 렌더링 이후 값이 변하지 않아도 될 때 사용
요소와 구성요소를 한 번만 렌더링함
이후에 재랜더링 시, 요소 / 구성 요소 및 모든 하위 요소는 정적 콘텐츠로 처리되어 건너뜀
업데이트 성능을 최적화하는 데 사용 가능

<span v-once> 변하지 않는 값 🌳 </span>

'v-if'와 'v-show' 구분하여 사용하기 💫

• v-if
  false값이면 돔이 랜더링될 때, 해당 엘리먼트는 랜더링 X
  true값으로 변하면 랜더링되고, false가 되면 제거되고, 다시 true가 되면 다시 랜더링

• v-show
  초기에 무조건 랜더링됨
  true / false 값이 계속 바껴도 재랜더링되지 않음

➿ 자주 클릭되는 경우 v-show // 한 번만 클릭될 경우 v-if

computed 활용 💫

computed의 값은 캐싱되기 때문에, 재랜더링 시 같은 값이라면 연산하지 X

데이터에 대한 이해 💫

vue에서 data, state, computed, getters로 데이터 모델이 선언되면
defineReactive를 통해 해당 객체는 vue의 관리 대상이 됨
→ 각 객체마다 Observe가 생성되어 내부적으로 getter & setter가 생성됨

보여줄 데이터가 바뀔 가능성이 없고, 관찰만 할 경우 데이터를 관리할 필요가 없기 때문에 이러한 데이터를 vue의 감지 대상에서 제거
→ Observe 생성 안되게 Object.freeze() 사용
해당 객체는 readOnly 판정을 받아, 객체에 대해 >수정 / 삭제 / 추가< 가 불가능
사용 시점 : api를 통해 데이터를 받고, state에 할당할 때 (mutations)

export const state = {
    plantList: []
};

// mutations
export const mutations = {
    setPlantList(state, payload) {
        state.plantList = Object.freeze(payload);
    }
};

// actions
export const actions = {
    async getPlantList({ commit }, params) {
        const res = await api.planting.getplanting(params);
        commit("setPlantList", res.data.data);
    }
}

➿ mutations을 통해 state를 할당할 때 freeze 시켜 vue의 감시대상에서 벗어나면, getter와 setter가 생성되지 않아 메모리 아끼기 가능 !