- 목차 -

이제는! 더이상! 물러날 곳이 없! 다!

쓸데없이 비싸고 복잡한 함수, 컴포넌트가 계속 리렌더링 되는 지옥에 빠져버렸다. 생각조차 못하고 있던 곳에서 렌더링이 계속 발생하고 있어서 문제가 생겼다.

불필요한 렌더링 줄이기 위한 노력 첫번째. 같은 실수는 반복해서 만나지 말자!

useMemo

React에는 기능과 성능을 향상시키는 다양한 기능을 사용할 수 있게 만들어놓은 라이브러리가 있습니다. 가장 자주 사용되는 useState부터 useEffect, useRef 등 이 있고, 이를 통틀어 React hooks 라고 부릅니다. 그 중 메모이제이션을 통해 성능을 최적화하는 데 중요한 역할을 하는 useMemo를 정리해보려고 합니다.

useMemo와 useCallback은 모두 메모이제이션과 관련이 있어 리액트를 사용하며 성능 개선을 위해 사용하는 hook입니다. useMemo는 값을, useCallback은 함수를 반환하는데, 훅을 적절하게 사용하면 중복된 연산을 최소화하고, 불필요한 렌더링을 줄여 애플리케이션의 성능을 최적화할 수 있습니다.

다른 hook들은 정말 자주사용하는 반면(사실 없으면 안 됨) useMemo는 없어도 지장이 없어서 사용을 안 하다보니 언제 사용하면 좋은지, 어떻게 사용해야 좋은지도 제대로 잡혀있지 않은 것 같습니다. 그래서 useMemo를 사용하는 법과 어떻게 사용하면 좋은지를 공부할 거예요. 👩‍🏫

왜 사용할까? 🤷‍♀️

앞서 말했다시피, useMemo는 메모이제이션된 값을 반환하는 훅입니다. 값이 다시 계산되는 것을 방지하여 성능을 최적화하는 데 사용됩니다. 계산이 복잡하거나 무거워서 부하가 있을 경우, 동일한 계산을 여러 번 하지 않도록 하기 위해 사용합니다.

함수형 컴포넌트는 아래의 순서로 실행됩니다.

컴포넌트 렌더링 > Component 함수 호출 > 모든 내부 변수 및 함수 초기화

특정 변수가 함수의 실행을 통해 연산이 된다면, 컴포넌트 렌더링이 일어날 때마다 변수를 계산하는 함수가 호출 됩니다. 그 함수의 시간이 오래 걸린다면 렌더링이 일어날 때마다 실행되기떄문에 부하가 생기겠죠?

useMemo사용해서 렌더링마다 함수를 호출하지 않고 값을 저장해두었다가, 연산에 필요한 값이 변경되는 경우에만 연산을 실행해 문제를 해결할 수 있습니다.

사용 방법

useMemo는 첫 번째 인자로 콜백함수, 두 번째 인자로 의존성 배열을 받습니다. 두 번째 인자로 받은 배열 안의 값들이 변경될 때만 함수가 다시 호출됩니다.

 const visibleDatas = useMemo(
    () => filterDatas(todos, tab),
    [todos, tab]
  );

useMemo! 어떻게 잘 사용할까?

useMemo는 성능 최적화로만 사용해야합니다. 코드 실행을 위해 사용해야한다면 잘못된 선택입니다. 우선 문제를 찾아 모두 수정 후, 성능을 개선하기 위해 useMemo를 사용할 수 있습니다. 메모리제이션은 말그대로 메모리를 사용해 저장하는 것입니다. 모든 상황에 useMemo를 사용하면 오히려 성능이 나빠진다는 점! 🚨 계산이 정말로 오래걸리는지, 실행되면 부하가 있는지 ( 이를 고비용이라고 표현을 많이 합니다. 고비용 함수 ) 확인하고 사용하는 것이 좋습니다. 공식 문서에서는 console.time() 과 console.timeEnd() 를 사용하여 1ms 이상 이 나오면 메모하는 것이 좋다고 예시를 들었습니다.

세 가지는 꼭 기억하자

  • 조건을 잘 설정하여 불필요한 재계산을 피하기
  • 의존성 배열에 포함된 값들을 제대로 관리하기
  • 메모리 남발하지 않기 ❗️

저같은 경우 실무에서 양이 많은 데이터를 필터링해야되는 경우가 있었는데, 탭을 전환할 때마다 계산이 되어서 탭 전환이 눈에 띄게 오래걸리는 일이 있었습니다. 이때, 새로 받은 데이터가 변경될 때만 다시 계산하기 위해 useMemo를 사용해보고 그 이후로는 사용한 적이 없던 것 같습니다.

프론트엔드에서 오래 걸리는 로직이 있는 경우는 많지 않습니다. 리렌더링이 심각한 성능 이슈로 이어지는 경우는 흔치 않기 때문에 useMemo는 꼭 필요한 경우에 적절히 사용해서 최적화를 해봅시다!