useMemo를 사용해서 최적화하기

    const memoStore = useMemo(
        () => { return <StoreList placesList={placesList} /> },
        [placesList]
    )

useMemo,

값의 재활용을 위해 따로 메모리를 소비해서 저장해 놓는 것을 의미한다. 

 

함수형 컴포넌트가 렌더링이 되면 모든 component의 함수가 호출이 된다. 

이때 모든 내부 변수들이 초기화 과정을 거치는데, 렌더링이 될 때마다 모든 컴포넌트가 반복적으로 움직이게 되면 비효율적이고 무거워진다.

 

useMemo의 활용에 대해서 크게 생각이 없었지만, 

내가 만들고 있는 플젝안에서도 쓸떼없이 구동되지 않아도 될 컴포넌트들이 많았다. 

먼저 StoreList컴포넌트의 경우에는 main컴포넌트 내에서 검색되는 리스트를 Props로 받는다. 

검색한 결과 외에는 지속적인 렌더링이 필요가 없기때문에 useMemo함수에 해당컴포넌트를 넣었다. 

 

memoization을 해주게 된다면, 해당 함수는 의존성배열이 움직일때 외에 처음 계산된 결과값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되도 다시 호출하지 않고 이미 계산된 결과값을 메모리에 꺼내와서 재사용할 수 있게 도와준다.

 

방금 위에도 언급했지만 의존성 배열이 움직일때 외에이다. 

useMemo는 의존성배열을 두번째 인자로 받는데 값이 업데이트 될 때만 콜백함수를 다시 호출해서 memoization된 값을 업데이트 해주게 된다. 

 

* 참고로 처음 빈배열일 경우?

- 컴포넌트가 마운트 되었을 때만 계산하고 이후로는 메모리된 값만을 꺼내와서 사용한다. 

 

아직 최적화에 대한 공부는 조금 미흡한 상태이다.

useMemo나, useCallback은 꼭 필요할 때만 사용해주라는 글을 봤다. 

재활용을 위해서 메모리 저장해놓는 것이기에 불필요한 값까지 메모리가 되면 더 성능이 안좋아질 수 있다는 말이다...

쉽게 확 와닿는 부분이 없이 애매모호하다. 

조금 더 연습을 해봐야겠다