[React] React.memo란?

🗣️ 리액트 컴포넌트의 렌더링 성능 향상에 쓰이는 React.memo에 대해 설명해주세요.

• 의도: 성능 최적화에 관심이 있는지 확인하는 질문

• 팁: 사용 예시를 들면 좋다.

• 나의 답안

  React.memo는 리액트 함수형 컴포넌트의 불필요한 리렌더링을 방지하기 위한 성능 최적화 도구입니다.

  리액트에서는 부모 컴포넌트가 리렌더링되면, 기본적으로 자식 컴포넌트도 모두 다시 렌더링됩니다.
  이때 자식의 props가 바뀌지 않았는데도 리렌더링이 일어나면 불필요한 연산 낭비가 발생합니다.

  React.memo는 이런 상황을 막기 위해 컴포넌트의 props를 얕은 비교(shallow compare)하고,
  props가 이전 렌더와 동일하다면 컴포넌트를 다시 렌더링하지 않고 이전 결과를 재사용합니다.

  다만, props 비교 과정 자체도 비용이 있기 때문에,
  렌더링 비용이 큰 컴포넌트나 자주 리렌더링되는 상위 컴포넌트의 자식의 경우에만 사용하는 것이 효과적입니다.

• 주어진 답안 (모범 답안)

  리액트에서 컴포넌트가 리렌더링 되는 기준을 살펴보자면 대표적으로 받아온 props의 변경이 있습니다.
  props가 변경되면 하위 컴포넌트 모두가 리렌더링됩니다.
  그런데 만약 props의 변경과 하위 컴포넌트의 리렌더링과 관련이 없다면 어떨까요?
  필요한 부분만 업데이트하고 나머지는 그대로 두기 위해 사용하는 것이 바로 React.memo입니다.

  예를 들어서 리스트 렌더링에서 리스트 아이템에 React.memo를 붙여주게 되면 리스트에서 변경된 부분의 아이템만 리렌더링할 수 있습니다.
  리스트 전체를 리렌더링하지 않음으로써 성능을 최적화하는 것이 가능해진 겁니다.

---

📝 개념 정리

🌟 React.memo란?

• React.memo는 React에서 제공하는 고차 컴포넌트(Higher Order Component)로, 컴포넌트의 불필요한 리렌더링을 방지하여 성능을 최적화하는 데 사용된다.
• React.memo는 props가 동일한 경우 컴포넌트의 렌더링을 건너뛰는 역할을 한다.
  즉, 컴포넌트가 받는 props가 이전 렌더링과 동일하면, React는 해당 컴포넌트를 다시 렌더링하지 않고 이전 결과를 재사용한다.

---

🌟 React.memo의 사용법

기본적인 형태는 다음과 같다.

import React from "react";

const MyComponent = (props) => {
  console.log("렌더링!");
  return <div>{props.value}</div>;
};

// React.memo로 컴포넌트를 감싸서 메모이제이션
export default React.memo(MyComponent);

이제 이 컴포넌트는 props가 변경되지 않는 한 다시 렌더링되지 않는다.

---

🌟 React.memo의 동작 원리

React는 기본적으로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링된다.
하지만 자식 컴포넌트가 동일한 props를 받는 경우, React.memo를 사용하면 이전 렌더링 결과를 캐싱하여 불필요한 렌더링을 방지할 수 있다.

React.memo는 내부적으로 얕은 비교(shallow comparison)를 사용하여 props의 변경 여부를 확인한다.

• 얕은 비교: 객체의 참조값만 비교하며, 객체 내부의 값까지 비교하지 않는다.

---

🌟 React.memo 사용 예제

예제 1: 기본적인 사용

import React, { useState } from "react";

const Child = React.memo(({ count }) => {
  console.log("Child 렌더링");
  return <div>Count: {count}</div>;
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="텍스트 입력"
      />
      <Child count={count} />
    </div>
  );
};

export default Parent;

• Child 컴포넌트는 React.memo로 감싸져 있으므로, text가 변경되어도 count가 변하지 않는 한 리렌더링되지 않는다.
• React.memo가 없다면, Parent 컴포넌트가 리렌더링될 때 Child도 항상 리렌더링된다.

예제 2: 커스텀 비교 함수 사용
기본적으로 React.memo는 얕은 비교를 수행한다.
만약 props가 객체나 배열처럼 참조 타입이라면, React.memo의 기본 비교로는 props가 항상 변경된 것으로 간주된다.
이때 커스텀 비교 함수를 사용할 수 있다.

import React from "react";

const Child = React.memo(
  ({ user }) => {
    console.log("Child 렌더링");
    return <div>User: {user.name}</div>;
  },
  (prevProps, nextProps) => {
    // 사용자 정의 비교 함수
    return prevProps.user.name === nextProps.user.name;
  }
);

const Parent = () => {
  const user = { name: "John" };
  
  return <Child user={user} />;
};

export default Parent;

• 기본적으로 객체 user는 항상 새로운 참조값을 가지므로, React.memo만 사용하면 Child가 매번 리렌더링된다.

• 커스텀 비교 함수로 user.name만 비교하면 불필요한 렌더링을 방지할 수 있다.

  ⭐ React.memo의 사용자 정의 비교 함수란?

  • React.memo는 기본적으로 props의 얕은 비교(shallow comparison)를 통해 이전 props와 새로운 props가 동일한지 확인한다.
  • 만약 동일하다면, 해당 컴포넌트를 리렌더링하지 않는다.
  • 그러나 얕은 비교로 충분하지 않은 경우, 사용자 정의 비교 함수(custom comparison function)를 사용해 더 정교하게 비교 로직을 정의할 수 있다.

  ⭐ 사용자 비교 함수의 역할
  React.memo는 두 번째 매개변수로 사용자 정의 비교 함수(areEqual)를 전달할 수 있다. 이 함수는 다음과 같은 역할을 한다.

  1. props 비교 방식 커스터마이징
     • prevProps(이전 렌더링 시의 props)와 nextProps(이번 렌더링 시 전달된 props)를 비교한 후, 비교 결과에 따라 리렌더링 여부를 결정한다.
       → true를 반환하면 컴포넌트가 리렌더링되지 않는다.
       → false를 반환하면 컴포넌트가 리렌더링된다.
     • 기본 얕은 비교를 넘어, 객체의 특정 속성만 비교하거나 더 복잡한 조건을 추가할 수 있다.
     • 예를 들어, 객체 속성이 여러 개일 때, 중요한 속성만 비교하도록 구현이 가능하다.
  2. 불필요한 렌더링 방지
     • 비교 로직을 최적화하여 렌더링 비용이 높은 컴포넌트를 효율적으로 관리한다.
     • React.memo의 기본 얕은 비교만으로는 리렌더링을 방지할 수 없는 상황에서 효과적이다.

  ⭐ 코드에서 사용자 정의 비교 함수 분석

  1. prevProps와 nextProps의 user.name 값을 비교
     • prevProps.user.name과 nextProps.user.name이 같으면 true를 반환
     • prevProps.user.name과 nextProps.user.name이 다르면 false를 반환
  2. 결과에 따라 리렌더링 여부 결정
     • true 반환: React.memo는 렌더링을 건너뒨다. (컴포넌트 재사용)
     • false 반환: React.memo는 컴포넌트를 리렌더링한다.

  ⭐ 사용자 정의 비교 함수의 장점

  1. 참조형 데이터 비교
     객체의 특정 속성만 비교하거나, 깊은 비교(deep comparison)로 리렌더링을 더 세밀하게 제어할 수 있다.

  (prevProps, nextProps) => {
    return provProps.user.name === nextProps.user.name;
  }

  2. 복잡한 비교 로직 적용
     예: 배열의 길이만 비교하거나 특정 조건이 만족될 때만 렌더링한다.

  (prevProps, nextProps) => {
    return prevProps.items.length === nextProps.items.length;
  }

  3. 특정 props 무시
     중요하지 않은 props는 무시하고 필요한 props만 비교 가능

  (prevProps, nextProps) => {
    return prevProps.user.name === nextProps.user.name; // age는 비교하지 않음
  }

  4. 비교 비용 절감
     특정 상황에서는 비교 로직을 간소화하여 기본 얕은 비교보다 효율적으로 동작한다.

  ⭐ 사용자 정의 비교 함수의 주의점

  1. 함수 작성 시 성능 고려
     • 비교 함수는 컴포넌트가 렌더링될 때마다 호출되므로, 지나치게 복잡한 로직은 오히려 성능을 저하시킬 수 있다.
     • 간단하고 효율적인 비교 로직을 작성하는 것이 중요하다.
  2. 리렌더링이 필요한 상황을 정확히 판단
     • 잘못된 비교 로직으로 인해 필요한 리렌더링이 발생하지 않는 문제가 생길 수 있다.
  3. React.memo를 사용할 필요가 없는 경우
     • React.memo는 리렌더링 비용이 높은 컴포넌트에서 유용하다.
     • 비용이 낮은 컴포넌트에서는 React.memo와 사용자 정의 비교 함수가 오히려 성능을 저하시킬 수 있다.

---

🌟 React.memo를 사용할 때 주의할 점

1. 얕은 비교의 한계
   • 기본적으로 React.memo는 얕은 비교만 수행하므로, props로 전달되는 객체나 배열이 항상 새로운 참조를 가지는 경우에는 제대로 작동하지 않을 수 있다.
   • 위 문제를 해결하기 위한 방법
     1) props를 불변 데이터로 유지 (예: useMemo, useCallback으로 메모이제이션)

     const Parent = () => {
       const [count, setCount] = useState(0);
       
       // 메모이제이션하지 않은 경우
       const user = { name: "John" };
       
       // useMemo로 메모이제이션한 경우
       const memoizedUser = useMemo(() => ({ name: "John" }), []);
       
       return <Child user={memoizedUser} />;
     };

     2) 커스텀 비교 함수 사용

2. 복잡한 비교 함수로 인한 성능 저하
   • 커스텀 비교 함수를 지나치게 복잡하게 작성하면, 비교 연산 자체가 성능 병목이 될 수 있다.
   • 최적화가 필요한 경우에만 커스텀 비교 함수를 작성하는 것이 좋다.

3. 상태 변화로 인한 렌더링
   • React.memo는 props 변경에만 영향을 미친다.
     컴포넌트 내부 상태나 useContext로 관리되는 값이 변경되면, 여전히 리렌더링된다.

4. 렌더링 비용이 낮은 컴포넌트에서는 사용하지 않기
   • React.memo를 사용하면 비교 연산에 약간의 오버헤드가 추가된다.
   • 따라서 렌더링 비용이 낮거나 최적화가 불필요한 간단한 컴포넌트에서는 굳이 사용하지 않는 것이 좋다.

---

🌟 React.memo와 관련된 다른 최적화 기법

1. useMemo와 함께 사용
   React.memo를 사용하더라도 부모 컴포넌트에서 전달하는 props가 계산된 값이라면, useMemo를 사용해 props를 메모이제이션해야 효율적이다.

   import React, { useState, useMemo } from "react";
   
   const Child = React.memo(({ value }: { value: number }) => {
     console.log("Child 렌더링");
     return <div>Computed Value: {value}</div>;
   });
   
   const Parent = () => {
     const [count, setCount] = useState<number>(0);
     const [inputValue, setInputValue] = useState<string>("");
     
     // 계산 비용이 높은 함수
     const computeExpensiveValue = (num: number) => {
       console.log("값 계산 중...");
       return num * 2;
     };
     
     // useMemo를 사용하여 계산된 값을 메모이제이션
     const memoizedValue = useMemo(() => computeExpensiveValue(count), [count]);
     
     return (
       <div>
         <button onClick={() => setCount((prev) => prev + 1)}>증가</button>
         <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
         <Child value={memoizedValue} />
       </div>
     );
   };
   
   export default Parent;

   • 버튼을 클릭하면 count가 변경되고 Parent가 리렌더링된다.
   • computeExpensiveValue는 count가 변경될 때만 실행되며, 메모이제이션된 값이 자식 컴포넌트로 전달된다.
   • React.memo와 useMemo를 함께 사용해 불필요한 자식 리렌더링을 방지한다.

2. useCallback과 함께 사용
   자식 컴포넌트로 함수를 전달할 때, useCallback을 사용해 함수를 메모이제이션하여 불필요한 리렌더링을 방지한다.

   import React, { useState, useCallback } from "react";
   
   const Child = React.memo(({ onClick }: { onClick: () => void }) => {
     console.log("Child 렌더링");
     return <button onClick={onClick}>클릭</button>;
   });
   
   const Parent = () => {
     const [count, setCount] = useState(0);
     
     // useCallback으로 함수 메모이제이션
     const handleClick = useCallback(() => {
       console.log("Child 버튼 클릭");
     }, []);
     
     return (
       <div>
         <button onClick={() => setCount((prev) => prev + 1)}>부모 버튼</button>
         <p>부모 카운트: {count}</p>
         <Child onClick={handleClick} />
       </div>
     );
   };
   
   export default Parent;

   • 부모 버튼을 클릭하면 count가 업데이트되어 Parent가 리렌더링된다.
   • 하지만, useCallback으로 handleClick을 메모이제이션했기 때문에 Child의 onClick prop은 변경되지 않는다.
   • 따라서 React.memo는 Child를 리렌더링하지 않는다.

3. React.useTransition
   React 18에서 추가된 useTransition은 상태 업데이트를 긴급 업데이트와 트랜지션 업데이트로 구분하여 UI 업데이트를 부드럽게 만든다.
   특히, 비동기 데이터 로드와 같은 작업에서 유용하다.

   import React, { useState, useTransition } from "react";
   
   const SlowComponent = React.memo(({ list }: { list: string[] }) => {
     console.log("SlowComponent 렌더링");
     return (
       <ul>
         {list.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     );
   });
   
   const Parent = () => {
     const [input, setInput] = useState("");
     const [list, setList] = useState<string[]>([]);
     
     // useTransition으로 상태 업데이트를 트랜지션으로 처리
     const [isPending, setIsPending] = useTransition();
     
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value;
       setInput(value); // 1. 입력 필드 상태는 즉시 업데이트
       
       // 2. 트랜지션 상태로 긴 작업 처리
       startTransition(() => {
         const newList = Array.from({ length: 2000 }, (_, i) => `${value} - ${i}`);
         setList(newList); // 긴 작업 (목록 생성 및 업데이트)
       });
     };
     
     return (
       <div>
         <input type="text" value={input} onChange={handleChange} />
         {isPending ? <p>Loading...</p> : <SlowComponent list={list} />}
       </div>
     );
   };
   
   export default Parent;

   • 사용자가 입력을 변경하면 handleChange가 호출된다.

   • startTransition은 list 업데이트를 트랜지션 작업으로 처리하여 긴급 업데이트인 입력 처리와 별도로 실행한다.

   • isPending으로 트랜지션 상태를 표시하여 로딩 메시지를 보여준다.

     ⭐ 트랜지션 작업의 핵심 개념

     • 트랜지션 작업은 UI에서 긴 작업(예: 목록 생성, 렌더링)을 비동기로 처리하는 방식이다.
     • 메인 작업(예: 입력 필드 업데이트)은 즉시 처리하여 사용자 경험의 부드러움을 유지한다.
     • React는 트랜지션 작업이 처리되는 동안 UI가 "대기 중"임을 나타내도록 설정할 수 있다.

     ⭐ 트랜지션 작업 부분 해석

     1. setInput(value) (즉각적인 업데이트)
        • 사용자가 입력 필드에 입력하는 텍스트는 즉시 상태가 업데이트된다.
        • 사용자에게 빠르게 피드백을 제공하기 위해, 이 작업은 우선순위가 높다.
     2. startTransition(() => { ... }) (트랜지션 작업)
        • startTransition은 React에게 이 작업은 낮은 우선순위로 처리해도 괜찮다는 것을 알려준다.
        • 즉, React는 이 작업이 완료될 때까지 메인 작업(입력 필드의 즉각적인 업데이트)을 방해하지 않도록 처리한다.
        • 여기서는 긴 작업인 newList 생성과 setList를 트랜지션 작업으로 처리한다.
     3. isPending 상태
        • isPending은 트랜지션 작업이 진행 중인지 여부를 나타내는 상태이다.
        • 트랜지션 작업이 진행 중이면 true, 완료되면 false가 된다.
        • 이 상태를 사용하여 사용자에게 로딩 중임을 보여주는 피드백을 제공한다.

     ⭐ 트랜지션 작업의 동작 방식

     1. 우선순위 분리
        React는 트랜잭션 작업을 낮은 우선순위로 처리한다.
        즉, 더 중요한 작업(사용자 입력과 같은)을 먼저 처리한 후, 트랜지션 작업을 나중에 처리한다.
     2. 비동기 처리
        트랜지션 작업은 UI 차단 없이 백그라운드에서 처리된다.
        예를 들어, newList 생성과 setList가 긴 작업이라도 입력 필드는 즉시 업데이트된다.
     3. UI 상태 표시
        isPending을 활용해 사용자에게 "Loading..." 같은 피드백을 제공할 수 있다.
        트랜지션 작업이 끝마녀 React는 UI를 새롭게 렌더링한다.

     ⭐ useTransition의 이점

     1. 더 나은 사용자 경험
        • 메인 작업(입력 필드 업데이트)을 즉각적으로 처리하여 입력의 지연을 방지한다.
        • 사용자에게 로딩 상태를 표시함으로써 UI가 응답하지 않는 것처럼 보이는 현상을 방지한다.
     2. 긴 작업의 분리
        • CPU 리소스가 많이 필요한 긴 작업을 트랜지션으로 처리하여 UI 차단을 방지한다.
     3. React의 우선순위 관리 활용
        • React의 스케줄링 시스템을 활용하여 우선순위를 나누고 UI 응답성을 개선한다.

4. React.useDeferredValue
useDeferredValue는 현재 값의 지연된(deferred) 버전을 제공하여, 긴급 상태 업데이트와 느린 업데이트를 분리할 수 있다.

   import React, { useState, useDeferredValue } from "react";
   
   const SlowComponent = React.memo(({ list }: { list: string[] }) => {
     console.log("SlowComponent 렌더링");
     return (
       <ul>
         {list.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     );
   });
   
   const Parent = () => {
     const [input, setInput] = useState("");
     const list = Array.from({ length: 2000 }, (_, i) => `${input} - ${i}`);
     
     // 입력된 값을 지연된 값으로 처리
     const deferredList = useDeferredValue(list);
     
     return (
       <div>
         <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
         <SlowComponent list={deferredList} />
       </div>
     );
   };
   
   export default Parent;

   • 사용자가 입력을 변경하면 list가 즉시 생성된다.

   • useDeferredValue는 지연된 list 값을 SlowComponent로 전달한다.

   • 입력 처리는 빠르게, SlowComponent 렌더링은 뒤로 미뤄져 부드러운 사용자 경험을 제공한다.

     ⭐ 코드에서 useDeferredValue의 역할

     • list: 입력 값(input)이 변경될 때마다 생성되는 즉각적인 값이다.
     • deferredList: list 값을 지연시켜, React가 메인 작업(사용자 입력)에 대한 렌더링을 먼저 처리하고, 시간이 날 때 비로소 SlowComponent가 렌더링되도록 만든다.

     ⭐ 지연 작업의 구체적인 동작 방식

     1. 즉각적인 업데이트
        • 사용자가 입력 필드에 값을 입력하면 input 상태가 즉시 업데이트된다.
        • 이 상태는 list에 반영되지만, list 값이 바로 SlowComponent에 전달되지는 않는다.
     2. 지연된 값 제공
        • useDeferredValue는 list 값을 지연시켜 낮은 우선순위로 처리한다.
        • 즉, React는 먼저 입력 필드에 대한 렌더링을 완료하고, 그 이후에 시간이 있을 때 deferredList를 업데이트하여 SlowComponent를 렌더링한다.
     3. 렌더링 최적화
        • React는 입력 필드 업데이트와 같은 즉각적인 작업을 차단하지 않고, 시간이 허용될 때 SlowComponent를 업데이트한다.
        • 이렇게 하면 사용자 입력에 대한 반응성을 유지하면서, SlowComponent와 같이 렌더링 비용이 큰 컴포넌트의 업데이트를 효율적으로 처리할 수 있다.

     ⭐ 왜 useDeferredValue가 필요한가?

     • 문제: 만약 useDeferredValue 없이 코드가 작성된다면
       1. 사용자가 입력 필드에 값을 입력할 때마다 list가 새로 생성된다.
       2. 즉각적으로 SlowComponent로 전달되어 렌더링이 발생한다.
       3. 결과적으로, 사용자가 입력 필드에 값을 입력할 때 입력 지연(lag)이 발생할 수 있다.
     • 해결: useDeferredValue를 사용하면
       1. 입력 필드(input) 업데이트는 즉시 처리된다.
       2. list 업데이트는 지연되어 React가 나중에 처리한다.
       3. 결과적으로 사용자 입력에 대한 빠른 응답성과 SlowComponent 렌더링의 효율성을 모두 유지할 수 있다.

     ⭐ useDeferredValue의 특징

     1. 우선순위 관리
        높은 우선순위 작업(예: 사용자 입력)과 낮은 우선순위 작업(예: 리스트 렌더링)을 분리하여 처리한다.
     2. 지연된 값 업데이트
        deferredList는 React가 여유가 있을 때만 업데이트되므로, 비싼 렌더링 작업이 사용자 경험에 영향을 미치지 않는다.

---

🌟 React.memo가 적합한 상황

• 자식 컴포넌트가 비교적 무거운 렌더링 작업을 수행하고, props가 자주 변경되는 경우
• 부모 컴포넌트가 자주 리렌더링되지만 자식 컴포넌트의 props는 자주 변경되지 않는 경우