React hooks - React.memo

목차

• React.memo
• React.memo 예제

React.memo

• 리액트에서 제공하는 HOC(higher order component)
• 자식 컴포넌트의 불필요한 렌더링을 최적화시키기 위해 사용

HOC

• 어떤 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환해주는 함수

HOC 관점에서 React.memo

• React.memo는 일반 자식 컴포넌트를 최적화된 컴포넌트로 만들어주는 역할

• 예로 Student 컴포넌트가 있을 경우 Student 컴포넌트의 Prop Check를 하여 Prop에 변화가 있을 경우에만 렌더링
• 변화가 없을 경우 기존에 이미 렌더링 된 내용을 재 사용

즉, 자식 컴포넌트의 불필요한 렌더링을 최적화시키는 것은 React.memo가 HOC이기 때문에 가능

주의 사항

React.memo는 다음과 같은 상황일 경우에만 사용

• 컴포넌트가 같은 Props로 자주 렌더링 될 때
• 컴포넌트가 렌더링 될 때마다 복잡한 로직을 수행 할 경우

React.memo 예제

app.tsx

import { useMemo, useState } from "react";
import Box from "./component/Box";

function App() {
  const [size, setSizes] = useState(100);
  const [isDark, setIsDark] = useState(false);
  const createBoxStyle = useMemo(() => {
    return {
      backgroundColor: "pink",
      width: `${size}px`,
      height: `${size}px`,
    };
  }, [size]);

  return (
    <div style={{ background: isDark ? "black" : "white" }}>
      <input
        type="number"
        value={size}
        onChange={(e) => {
          setSizes(+e.currentTarget.value);
        }}
      />
      <button
        onClick={() => {
          setIsDark(!isDark);
        }}
      >
        Change Theme
      </button>
      <Box createBoxStyle={createBoxStyle} />
    </div>
  );
}

export default App;

box.tsx

import { useEffect, useState } from "react";

type CreateBoxStyle = {
  backgroundColor: string;
  width: string;
  height: string;
};

interface BoxProps {
  createBoxStyle: CreateBoxStyle;
}

function Box({ createBoxStyle }: BoxProps) {
  const [style, setStyle] = useState({} as CreateBoxStyle);

  useEffect(() => {
    console.log("박스 사이즈 조절");
    setStyle(createBoxStyle);
  }, [createBoxStyle]);

  useEffect(() => {
    console.log("재 렌더링");
  });

  return <div style={style}></div>;
}

export default Box;

• 저번 useCallback과 useMemo의 예제
• box 컴포넌트에 useEffect를 하나 더 추가하여 재 렌더링 될 때마다 실행하도록 설정

실행 결과

• 버튼을 누를 때마다 사실 Box 컴포넌트는 재 렌더링
• 사실상 변경되는 사항이 없는 불 필요한 렌더링이기에 막아버리고 싶음

box.tsx

import { memo, useEffect, useState } from "react";

export default memo(Box);

• Box 함수를 memo함수에 감싸는 형태로 변경
• 이렇게 함으로써 Prop에 변경 사항이 있을 때만 Box 컴포넌트가 재 렌더링

실행 결과

• 더 이상 change theme 버튼을 눌러도 재 렌더링이 발생하지 않는 것을 확인

레퍼런스

별코딩님 - React.memo로 컴포넌트 최적화하기 (ft. useMemo, useCallback)

https://www.youtube.com/watch?v=oqUgcxwrnSY&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=9