[React.js] React.memo()

React.memo()

들어가며

• 리액트(React.js)에서 제공하는 고차 함수(Higher-Order Component)인 React.memo()에 대해 정리해본다.

 

React.memo()

개념

• 리액트에서 제공하는 고차 함수(Higher-Order Component)
• 함수형 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 한다.
• 전달된 props가 변경되지 않는 한 해당 컴포넌트는 다시 렌더링되지 않도록 최적화(Optimization)할 수 있다.
• React.memo()는 함수형 컴포넌트를 인자로 받아, 그와 동일한 동작을 하는 새로운 컴포넌트를 반환하지만, 추가적으로 props가 변경되었는지 확인하는 최적화 작업이 추가된다.
  • props가 변경되지 않은 경우, 메모이제이션된 컴포넌트는 이전 렌더링에서 캐시된 결과를 반환한다.

 

사용 방법

			
			
			
		
import { useState, memo } from 'react';
 
// 일반적인 자식 컴포넌트
const ChildComponent = ({ value }) => {
  // ...
};
 
// React.memo로 감싸서 최적화 하기
const MemoizedChildComponent = memo(ChildComponent);
 
const ParentComponent = () => {
  // ...
 
  return (
    <div>
      // ...
      <MemoizedChildComponent value={value} />
    </div>
  );
};
 
export default ParentComponent;

 

• 아래와 같이 2가지 방법으로 사용할 수 있다.

방법 ① : React.memo() 사용하기

			
			
			
		
import React, { useState } from 'react';
 
const MyComponent = (props) => {
  return <div>{props.name}</div>;
};
 
export default React.memo(MyComponent);

 

방법 ② : memo() 사용하기 

			
			
			
		
import { memo } from 'react';
 
const MyComponent = (props) => {
  return <div>{props.name}</div>;
};
 
export default memo(MyComponent);

 

사용 이유

• 리액트에서 부모 컴포넌트가 업데이트될 때 자식 컴포넌트도 함께 다시 렌더링되는데, 만약 자식 컴포넌트에 전달된 props가 변하지 않는다면, 불필요한 렌더링이 발생하게 된다.
• 이럴 때 React.memo()를 사용하면 성능을 최적화할 수 있다.

			
			
			
		
import { memo } from 'react';
 
const MyComponent = ({ name }) => {
  console.log('MyComponent rendered');
  return <div>Hello, {name}!</div>;
};
 
// React.memo로 감싸서 불필요한 렌더링을 방지
export default memo(MyComponent);

 

⇒ React.memo()로 감싸진 컴포넌트는 부모 컴포넌트가 업데이트되어도 전달된 props(name)가 변경되지 않으면 다시 렌더링되지 않는다.
⇒ React.memo()는 기본적으로 얕은 비교(Shallow Comparison)를 사용하여 props의 변경 여부를 판단한다.

✅ 원시 타입 (문자열, 숫자 등) → 값이 변경되었는지 확인
✅ 참조 타입 (객체, 배열 등) → 참조가 변경되었는지 확인

 

커스텀 비교 함수

• React.memo()는 기본적으로 얕은 비교를 하지만, 필요할 경우 직접 비교 로직을 정의할 수 있다.
• React.memo()의 두 번째 인자로 커스텀 비교 함수를 전달하여 더 정교한 조건으로 렌더링 여부를 결정할 수 있다.

			
			
			
		
const areEqual = (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;   // 원하는 비교 로직 정의
};
 
export default memo(MyComponent, areEqual);    // 두 번째 인자에 커스텀 비교 함수 넣기

 

React.memo()를 이용하여 불필요한 리랜더링을 막아 성능을 최적화시킬 수 있다. React.memo()는 컴포넌트의 props에 전달되는 값이 '동일'하면 리랜더링을 촉발시키지 않는다.

 

참고 사이트

memo – React