UseMemo로 성능 개선하기

Posted Jul 29, 2024

By yongb2n

4 min read

UseMemo로 성능 개선하기

지금껏 코드를 작성하면서 브라우저 성능에 대해서 인지를 하고 있었지만, 개선할 수 있는 코드를 작성해본 적이 없었다.

이번 기회에 useMemo를 사용해 검색 결과를 필터링하는 함수를 최적화하는 과정을 공유해보려고 한다.

그 전에 useMemo가 무엇인지 핵심만 간단하게 알아보자.

UseMemo란?

계산량이 많은 작업의 결과를 memoization하여 의존성이 변경될 때만 재계산하도록 합니다. 이를 통해 성능 최적화를 할 수 있습니다. 반환값을 캐싱하는 것을 memoization이라고 하며, 이 훅을 useMemo라고 부르는 이유입니다.

내가 UseMemo를 적용할 함수는 서버에서 받아온 데이터 배열을 필터링하는 filteredArticles 함수이다.

UseMemo 적용 전 함수 코드 및 설명

코드

  
const filteredArticles = articles.filter((article) =>
  article.title.includes(searchKeyword)
);

코드 설명

articles 배열: API 요청을 통해 서버에서 받아온 데이터 배열이다.
filter 메서드: 배열에서 특정 조건을 만족하는 요소들만을 포함하는 새로운 배열을 생성하고, 콜백 함수를 인자로 받는다.
콜백 함수: 조건을 사용하여 article 객체의 title 속성이 searchKeyword 상태 값을 포함하고 있는지 확인한다.
필터링 조건: article.title.includes(searchKeyword)가 true인 경우에 해당 article 객체는 새로운 배열에 포함되고, false인 경우, 배열에 포함되지 않는다.

지금 filteredArticles 함수는 매번 렌더링할 때 수행되는데, 이는 searchKeyword나 articles가 변경되지 않았음에도 불필요하게 연산을 수행해 성능에 영향을 줄 수 있다.

**useMemo 적용 전 성능 ** 크롬 익스텐션 Lighthouse로 배포 전에 측정한거라 정확한 수치는 아님을 알립니다.

그렇다면 useMemo를 적용하면 어떤 장점이 있을까?

###

UseMemo를 적용한 함수의 장점

코드

  
const filteredArticles = useMemo(() => {
  return articles.filter((article) => article.title.includes(searchKeyword));
}, [articles, searchKeyword]);

장점

useMemo를 사용하면 searchKeyword나 articles가 변경될 때만 필터링 작업을 수행하고, 그 외의 경우에는 이전에 계산된 결과를 재사용할 수 있다.

성능 최적화: 불필요한 필터링 연산을 방지하여 성능을 최적화한다. 특히, articles 배열이 크거나 복잡한 연산을 포함할 경우 더욱 효과적이다.
렌더링 최적화: searchKeyword나 articles가 변경되지 않을 때는 컴포넌트가 다시 렌더링되지 않도록 하여, React의 렌더링 성능을 최적화한다.

**useMemo 적용 후 성능 **