react 최적화 React.memo / useCallback / useMemo

리액트에서 렌더링이 자주 일어나는 것은 좋은 상황이 아니다.

렌더링은 필요할 때만 되어야 한다. 최적화 작업을 통해 개선할 수 있다.

 

최적화 방법

• React.memo : 컴포넌트
• useCallback : 인자로 들어오는 함수
• useMemo : value(함수 리턴값 또는 값 그 자체)

 

memo (React.memo)

컴포넌트를 메모리에 저장한다.

React.memo(컴포넌트명, 비교함수)

React.memo는 얕은 비교를 수행한다. 만약 다른 비교를 원한다면 두 번째 인자에 비교함수를 넣어주면 된다.

 

React.memo로 컴포넌트를 감싸면 컴포넌트를 메모리에 저장한다. (memoization)

렌더링 시에 값이 변경되었는지 확인할 때 변경이 없을 경우 메모리에 저장된 값을 재사용한다.

재사용하기 때문에 해당 컴포넌트는 렌더링 되지 않는다.

import React from 'react';

const Box1 = () => {
	...생략
}

export default React.memo(Box1);

 

 

변경이 없을 경우 메모리에 있는 값을 사용하기 때문에 렌더링이 일어나지 않아 React.memo 사용 전보다 성능의 이점이 있다고 할 수 있다.

 

이런 경우에 사용하자

컴포넌트가 같은 props로 자주 렌더링 되거나, 무거운 연산이 있는 경우 사용하는 것이 좋다.

 

 

useCallback

인자로 들어오는 함수 자체를 저장한다.

 

initCount 함수는 렌더링 될 때마다 다시 할당될 필요가 없기 때문에 useCallback hook을 사용하여 메모리에 저장한다. 

이때, console.log 에 count를 사용하여 찍어주고 있으므로 count 값이 바뀔 때 함수가 할당될 수 있도록 의존성 배열에 count를 추가한다.

이 부분을 추가하지 않으면 계속 0으로 찍힌다. 

import React, { useCallback, useState } from 'react'
export default function App() {
  const [count, setCount] = useState(0);

  const initCount = useCallback(() => {
    console.log(`${count} 에서 0으로 변경`);
    setCount(0);
  }, [count]);


  ...생략
}

 

 

useMemo

useMemo(콜백함수, [의존성 배열])

의존성 배열에 있는 값이 변경될 때만 콜백함수를 실행하여 메모리에 다시 값을 저장한다.

만약 의존성 배열을 [] 빈 배열로 둔다면 컴포넌트가 처음 마운트 되었을 때 한 번 메모리에 저장한다.

 

어떤 무거운 작업을 하는 함수가 매번 실행된다면 성능에 악영향을 미칠 수 있다.

이런 경우에 usMemo를 사용하여 연산된 값을 메모리에 저장하여 컴포넌트가 렌더링 되더라도 무거운 작업을 다시 호출하지 않고 메모리에서 꺼내와서 재사용할 수 있다.

import React, { useMemo, useState } from 'react'

export default function HeavyComponent() {
  ..생략
  const value = useMemo(() => heavyWork(), []);
  ..생략
}

 

 

주의사항!

useMemo는 메모리에 저장하기 때문에 너무 자주 사용하면 오히려 성능이 악화되므로 꼭 필요한 부분에만 사용해야 한다.