[React] useMemo? React.memo!

React.memo

어떠한 컴포넌트를 React.memo 처리를 해주면 그 컴포넌트가 렌더링될 때마다 Prop Check를 통해 props의 변화가 있는 경우에만 렌더링을 하도록 해준다. props의 변화가 없을 경우에는 이전에 이미 렌더링된 내용을 재사용하여 불필요한 컴포넌트 렌더링을 줄여준다.

 

const Student = ({ name, age, address }) => {
  return (
    <div>
      <h1>{name}</h1>
      <span>{age}</span>
      <span>{address}</span>
    </div>
  );
};

 

다음과 같은 컴포넌트일 경우 name, age, address 중 변화가 있다면 렌더링하고 세 개의 props 전부 변화가 없다면 해당 컴포넌트를 렌더링하지 않고 재사용한다.

 

React.memo에서 memo는 memoization을 뜻하기 때문에 

[React] Memoization과 useMemo 사용법

React.memo를 사용하게 되면 컴포넌트 자체를 메모리에 저장하게 되는데 React.memo를 많이 사용하게 되면 메모리 소모가 크기 때문에 꼭 필요할 때만 사용하는 것이 좋다. 

 

 

언제 사용하면 좋을까?

React.memo는 다음과 같은 경우에 사용하면 좋다.

1. 컴포넌트가 같은 Props 자주 렌더링 될 경우
2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할 경우

 

 

사용법

import React, { memo } from 'react';

const Temp = () => {
  // ...
}

export default memo(Temp);

 

React.memo를 사용하려면 먼저 다음과 같이 memo를 import 해주어야 한다.

그리고 React.memo 처리할 컴포넌트 이름 앞에 memo() 해주면 해당 컴포넌트는 Prop Check를 통해 props가 변경되었을 때만 렌더링하는 컴포넌트가 된다. 

 

 

사용 예시 

// src/App.js

import Child from './Child';

function App() {
  const [parentAge, setParentAge] = useState(0);
  const [childAge, setChildAge] = useState(0);

  return (
    <div>
      <h2>부모</h2>
      <p>age :: {parentAge}</p>
      <button onClick={() => setParentAge(parentAge + 1)}>부모 age + 1</p>
      <button onClick={() => setChildAge(childAge + 1)}>자녀 age + 1</p>
      <Child name={'김민지'} age={childAge} />
    </div>
  );
};

export default App;

// src/Child.js

import React, { memo } from 'react';

const Child = ({ name, age }) => {
  return (
    <div>
      <h3>자녀</h3>
      <p>name :: {name}</p>
      <p>age :: {age}</p>
    </div>
  );
};

export default memo(Child);

 

다음과 같이 Child 컴포넌트를 React.memo 처리해줬으므로 Child 컴포넌트는  부모 age + 1  버튼을 클릭했을 땐 렌더링이 안되고  자녀 age + 1  버튼을 클릭했을 때만 렌더링된다는 것을 확인할 수 있다. 

 

! React.memo는 Prop Check를 통해서만 렌더링 여부를 결정하기 때문에 만약 컴포넌트가 useState, useReducer 등의 상태와 관련된 Hooks을 사용한다면 props의 변화가 없더라도 Hooks의 변화가 있다면 다시 렌더링된다는 점이 있다.

 

 

---

출처 : 유튜브 별코딩 (직접 듣기 강추!)