[React]리액트 성능 최적화 (1): memo 컴포넌트 박제

리액트 성능 최적화 (1): memo 컴포넌트 박제

React.memo는 컴포넌트의 Props가 변경되지 않았다면 리렌더링을 건너뛰고 마지막으로 렌더링된 결과를 재사용하는 고차 컴포넌트(HOC)임

리액트의 기본 동작은 부모가 변하면 자식도 무조건 다시 그리는 것이지만, memo를 사용하면 불필요한 연산을 막아 앱을 가볍게 만들 수 있다.

---

memo()의 역할: "변한 게 없으면 일하지 마"

부모 컴포넌트가 리렌더링되더라도 자식 컴포넌트로 전달되는 props 값이 이전과 같다면, 리액트는 해당 자식을 다시 그리지 않는다.

❖ memo의 작동 규칙:

• Props 비교: 리액트는 새로운 props와 이전 props를 얕은 비교(Shallow Compare)함
• 결과 재사용: 값이 같다면 실제 함수를 실행하지 않고 메모리에 저장된(캐싱된) UI 결과물을 즉시 내보냄

memo는 부모 때문에 발생하는 불필요한 리렌더링을 막아주는 가장 바깥쪽 방어막이다.

---

실전 예시: 불필요한 연산 방지

import { memo } from 'react';

// 자식 컴포넌트를 memo로 감싸서 박제함
const Counter = memo(function Counter({ initialCount }) {
  console.log("Counter 실행됨!"); // initialCount가 변할 때만 찍힘
  
  return (
    <div>
      <h1>시작 숫자: {initialCount}</h1>
    </div>
  );
});

export default Counter;

---

렌더링 최적화 프로세스

1. 부모 컴포넌트 리렌더링: 부모의 다른 상태가 바뀌어 부모 함수가 다시 실행됨
2. Props 체크: Counter로 전달되는 initialCount가 이전과 동일한지 확인됨
3. 실행 건너뛰기: 값이 같다면 Counter 함수는 호출조차 되지 않고 예전 화면을 그대로 보여줌

isPrime 함수가 컴포넌트 밖에 있는 이유

코드 작성 시 무거운 연산 로직(예: isPrime)을 컴포넌트 외부에 두는 것은 아주 중요한 포인트다.

❖ 함수 위치 선정 규칙:

• 내부에 있을 때: 컴포넌트가 리렌더링될 때마다 함수 객체가 매번 새로 생성되어 메모리를 낭비함

• 외부에 있을 때: 파일이 로드될 때 딱 한 번만 정의되고 메모리에 고정됨

• 컴포넌트의 내부 데이터(state, props)에 의존하지 않는 로직은 무조건 밖으로 빼는 게 유리함