[React] React.memo, useCallback

React.memo( )

 

React.memo( )는 리액트에서 제공하는 고차함수(HOC)이다. React.memo( )로 컴포넌트를 감싸주면 그 결과물을 메모리에 기억하여 재사용한다. 그를 통해 불필요한 리렌더링을 방지할 수 있기 때문에 성능적인 부분을 개선시킬 수 있다. 그러나 무분별한 React.memo( )의 남발은 렌더링 비용보다 메모이제이션 비용이 비싸져서 오히려 프로그램의 성능을 저하시킬 수도 있다. 따라서 적절한 순간에만 React.memo( )를 적용하는 것이 중요하다.

 

 

1. React.memo( )의 비교 방법

React.memo( )는 기본적으로 얕은 비교를 통해 Props 객체를 비교한다. 만약 Props를 비교하는 Custom 메소드를 지정해주고 싶다면 다음과 같이 React.memo( )의 두 번째 인자에 원하는 비교 함수를 넣어주면 된다.

 

 

2. React.memo( )를 사용해야할 때

• 함수형 컴포넌트이면서 동일한 Props에 매번 동일한 결과물이 렌더링된다.
• 해당 컴포넌트가 여러 번 렌더링된다.
• 동일한 Props로 여러 번 리렌더링된다.
• 컴포넌트의 규모가 어느 정도 있어서 Props에 의해 UI적으로 영향을 많이 받는다.

 

 

3. React.memo( )를 사용하면 쓰지 말아야 할 때

• 컴포넌트의 규모가 작다.
• 컴포넌트의 Props가 자주 변경된다.

 

추가적으로 React.memo( )로 감싼 컴포넌트가 props로 콜백 함수를 전달받는 경우 일반적인 방법을 적용시 해당 함수는 그것이 정의된 컴포넌트가 새롭게 렌더링될 때마다 새롭게 선언된다. 따라서 불필요한 리렌더링이 반복해서 일어나게 된다. 이럴 때 사용하는 것이 바로 useCallback hook이다.

 

 

UseCallback

 

useCallback은 함수를 메모이제이션하기 위해 사용하는 훅이다. 원칙적으로 컴포넌트 안에서 선언된 함수는 해당 컴포넌트가 렌더링될 때마다 새롭게 생성된다. 그러나 useCallback을 활용하면 해당 함수가 의존하는 값들이 변경되지 않는다면 동일한 함수를 재사용할 수 있다.

useCallback의 활용 예시. 위의 예시에서 toggleDarkMode 함수는 isDarkMode가 변경되지 않는 한 재사용된다.

 

  useCallback은 React.memo( )로 감싸진 자식 컴포넌트가 해당 함수에 의존할 때 강점을 보인다. 만약 useCallback을 적용하지 않는다면 위의 예시에서 Container 함수가 리렌더링될 때마다 toggleDarkMode 함수 역시 새롭게 생성되어 해당 함수에 의존하는 자식 컴포넌트 역시 매번 리렌더링되는 문제가 발생한다. 이러면 메모이제이션에 따른 비용은 비용대로 낭비되면서 렌더링은 매번 불필요하게 일어나는 문제가 발생한다. 여기서 만약 useCallback을 활용하게 된다면 자식 컴포넌트에 대한 React.memo( )의 효율성을 극대화시켜줄 수 있다.

  개인적으로 useCallback을 가장 즐겨 사용하는 때 중 하나는 React Native의 Flatlist를 활용할 때이다. Flatlist의 props 중 renderItem, keyExtractor 등의 함수에서 useCallback을 활용하지 않는다면 매번 새롭게 함수가 생성되어 메모리적인 이슈를 야기한다. 이 때 useCallback을 활용하여 메모이제이션된 콜백함수를 전달해준다면 성능을 크게 향상시킬 수 있다.

 

 

※ 메모이제이션 (Memoization)

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때 이전에 계산한 값을 저장하여 동일한 작업을 반복하지 않음으로써 프로그램의 성능을 개선하는 방법이다.