memo

✒️ 2025-05-28 10:49 내용 수정

Component의 props가 변경되지 않을 때 리렌더링을 건너뛰도록 지정하는 함수

참고 자료 : React memo
memo()로 Component를 감싸 메모화(Memoized)된 버전의 Component를 얻을 수 있다.
- 메모화된 버전의 Component는 props가 변경되지 않는 한 부모 Component가 리렌더링할 때 같이 리렌더링 하지 않는다.
  - 부모 Component가 리렌더링 하더라도 본인의 prop이 변경되지 않으면 React는 메모화된 버전의 Component를 리렌더링하지 않는다.
- 다만 메모화는 성능을 최적화하지만 보장되진 않아서 React가 여전히 렌더링할 수 있다.

// TargetComponent의 메모화된 Component를 얻을 수 있다
const MemoizedComponent = memo(TargetComponent, arePropsEqual);

첫 번째 매개변수로는 메모화할 Component를 전달한다.
두 번째 매개변수로는 선택 옵션으로, Component의 이전 prop 및 새로운 prop을 인자로 받는 함수를 전달한다.
- 해당 함수는 새 prop이 이전 prop과 동일하다면 true를 반환하여 새 prop으로도 Component가 동일한 방식으로 동일한 결과를 만들 수 있어야 한다.
- 두 prop이 일치하지 않다면 false를 반환해야 한다.

import { memo } from 'react';

const TestComponent = memo(function TestComponent({ count }) {
	return (
		<h1>메모화된 Component 테스트 {count}</h1>
	)
});

export default TestComponent;

아래 예시에서 name이 변경될 때 Test Component는 리렌더링되지만, count는 Test Component의 prop이 아니기 때문에 count가 변경되어도 Test Component는 리렌더링되지 않는다.

import MemoTest from './component/MemoTest';

function App() {
	return(
		<div>
	        <h2>다른 테스트</h2>
	        <MemoTest/>
	    </div>
	)
}

import { useState, memo } from "react";

function MemoTest() {
    let [name, setName] = useState('');
    let [count, setCount] = useState(0);

    const handleClick = function() {
        setCount(count+1);
    }

    const handleChange = function(e) {
        setName(e.target.value);
    }

    return(
        <>
            <button onClick={handleClick}>숫자 {count}</button>
            <input value={name} onChange={handleChange}></input>
            <Test name={name} />
        </>
    )
}

const Test = memo(function Test({ name }) {
	console.log(`${name}이 변경됨`);
	return(
		<h2>{name}으로 메모화된 Component 테스트</h2>
	)
})

export default MemoTest;

react memo 1.png