컴포넌트 성능 최적화를 위한 useMemo 사용법

현재 작업 중인 프로젝트에서 받은 코드 피드백을 정리하다가 useMemo를 처음으로 사용해봤다. 

리액트를 주로 사용하는 프론트엔드로 일하면서 면접때나 마주하던 useMemo라는 리액트 훅.

 

useMemo ? 

리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 리액트 훅이다. 

어떻게 컴포넌트의 성능을 최적화해주는냐하면은 보통 예시로 연산작업을 많이 든다. 계속해서 동일한 연산이 일어나는 작업에는 새로 처음부터 연산할 필요없이 디펜던시가 있으면 먼저 현재 의존값과 이전의 외존값을 비교하여 변경되었는지 확인합니다. 새로운 동작이 일어났을 때 기존의 값을 기억하고 있다가 거기서 부터 연산을 시작한다. 메모된 값을 저장하기 위해 메모이제이션 캐시를 사용합니다.
캐시는 메모된 값을 나타내는 키와 종속성을 나타내는 값이 있는 JavaScript 개체로 구현된다.
구성 요소가 렌더링 될 때 캐시를 확인하여 메모된 값이 주어진 종속성에 대해 이미 존재하는지 확인합니다. 메모된 값이 있으면 React는 함수를 다시 계산하지 않고 반환합니다.

 

조금 더 쉽게 이해를 하자면 리액트 함수형 컴포넌트가 어떻게 동작하는지 알면 좋을 것 같다. 리액트의 함수형 컴포넌트는 렌더링이 되고 함수를 호출하고 모든 내부의 변수를 초기화하는 순서로 작업이 일어난다. 나는 datepicker를 위해서 날짜를 지정해줘야했는데. 이부분이 계속해서 초기화된다는 것이다. 사실 이 정도는 크게 부담스럽지는 않지만 복잡한 연산이 들어가야하는 거라면 굉장히 부담이 될 것이다. 

그래서 useMemo를 쓰면 굳이 이 부분을 다시 호출하지 않아도 이전의 값을 기억해뒀다 다시 쓴다는 이야기다. 

 

즉, useMemo를 사용하면 데이터가 변경되지 않았을 때 업데이트를 하지 않기 때문에, 리렌더링을 막아서 쓸데없는 성능 저하를 막을 수 있다.

 

 

 

 

 

 

 

 

 

 

 

반응형

 

useMemo 형태

const cachedValue = useMemo(calculateValue, dependencies)

 

앞부분에 함수가 들어가고 , 뒤에 함수에서 참조하는 값이 의존값으로 들어간다. 

useMemo는 함수의 결과값을 메모하기 때문에 값을 return해야한다는 점을 잊지말자 

 

아래는 실직적인 적용 예이다. 
연산이 크게 들어가는 부분은 아니지만 useMemo를 사용하는게 좋을 것 같다는 피드백을 받아서 아래처럼 수정했다. 

// date picker에 쓸 date 정의하는 부분 

// datepicker date 정의한 부분이다. 변수로 바로 정의함.
const endDate = new Date(dateRange?.to || new Date());
endDate.setUTCHours(0, 0, 0, 0);


// useMemo 적용하기 
const endDate = useMemo(() => {
    const date = new Date(dateRange?.to || new Date());
    date.setUTCHours(0, 0, 0, 0);
    return date;
  }, [dateRange?.to]);