[React] 성능 최적화 React.memo에 대해서 알아보기

[React] 성능 최적화 React.memo에 대해서 알아보기

📖 들어가며

React에서 성능을 최적화하기 위해 사용할 수 있는 React.memo에 대해 소개하고, 기능을 어떤 상황에서 왜 사용하고 동작원리와 사용 예시 코드도 함께 알아보겠습니다.

React.memo란 ❓

memo를 사용하면 해당 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다.

즉, 메모화된 버전의 컴포넌트로 해당 컴포넌트의 props가 변경될 때만 리렌더링을 할 수 있습니다.

커다란 큐모의 컴포넌트나 복잡한 상황에서 불필요한 리렌더링을 막아 성능을 최적화할 수 있습니다.

동작 원리 💡

React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전달하게 됩니다.

그리고 props의 값이 바뀐 경우에만 리렌더링이 됩니다.

그리고 부모 컴포넌트가 변경되었지만 해당 컴포넌트의 props 값이 바뀌지 않았다면 리렌더링은 건너뛰게 됩니다.

사용 예시

import React, { memo } from 'react';

const ExpensiveComponent = ({ show }) => {
  console.log('ExpensiveComponent가 리렌더링됩니다.');
  return (
    <div>
      {show ? '안녕' : ''}
    </div>
  );
};

export default memo(ExpensiveComponent);

이렇게 감싸주기만 하면 props가 변경될 때만 리렌더링을 합니다.

감싸준 컴포넌트의 자식 컴포넌트까지 불필요한 리렌더링을 막을 수 있습니다.

 

하지만 여기서 의문점이 발생합니다.

"그럼 왜 이걸 모든 컴포넌트에 적용하지 않는 걸까?"

질문에 대한 답은 최적화에는 비용이 따르기 때문입니다.

 

이 memo 메서드는 부모 컴포넌트가 변경이 발생할 때마다 해당 컴포넌트로 이동하여 기존 props 값과 새로운 props의 값을 비교하게 됩니다.

그러면 리액트는 두 가지 작업을 할 수 있어야 합니다.

먼저 기존의 props 값을 저장할 공간이 필요하고 비교하는 작업도 필요합니다.

따라서, 이 효율은 어떤 컴포넌트를 최적화하느냐에 따라 달라지게 됩니다.

컴포넌트를 재평가하는 데에 필요한 성능 비용과 props를 비교하는 성능 비용을 서로 맞바꾸는 것입니다.

그리고 이것은 props의 개수와 컴포넌트의 복잡도, 그리고 자식 컴포넌트의 수에 따라 달라지므로 어느 쪽의 비용이 더 높다고 확정 짓고 말할 수 없습니다.

 

그래서 상황에 따라 적절히 사용하는 것이 중요합니다.

반응형

부모 컴포넌트로부터 props로 함수를 받는 상황 ❓

// Button.js

const Button = ({ onClick }) => {
  console.log('Button RUNNING');

  return <button onClick={onClick}>클릭</button>;
};

export default React.memo(Button);

// App.js
import React, { useState } from 'react';

function App() {
  const [toggleState, setToggleState] = useState(false);
  console.log('APP RUNNING');

  const toggleStateHandler = () => setToggleState((prev) => !prev);

  return (
    <div className="app">
      <Button onClick={toggleStateHandler}>Toggle State</Button>
    </div>
  );
}

export default App;

위에서 말한 내용대로라면 Button 컴포넌트의 props는 바뀌지 않기 때문에 최초 렌더링 후 리렌더링이 될 일이 없습니다.

하지만 부모컴포넌트가 리렌더링 될 때마다 같이 렌더링이 되는 상황을 겪을 수 있을 것입니다.

 

왜 그럴까요?

 

React.memo가 최종적으로 하는 일은 props의 값을 확인하고 비교합니다.

props.show === props.previous.show

위와 같은 방식으로 비교를 하게 됩니다. (실제로 이렇게 비교되는 것은 아닙니다.)

여기서 원시값과 참조값에 이해가 필요합니다.

cosnt str1 = 'hi';
const str2 = 'hi';
console.log(str1 === str2) // true

const arr1 = [1,2,3];
const arr2 = [1,2,3];
console.log(arr1 === arr2) // false

위와 같이 배열이나 객체, 함수는 참조값이기 때문에 각자 다른 주소를 가리키기 때문에 우리가 보기에 내용은 같더라도 비교 시에는 다릅니다.

 

다시 돌아와서 함수는 하나의 객체에 불과합니다.

부모 컴포넌트(App)가 실행될 때 새로운 함수 객체가 생성이 되고 이 함수 객체가 onClick props에 전달됩니다.

이렇게 되면 버튼은 props.onClick과 props.previous.onClick를 비교하는 셈인데 참조값이기 때문에 결국 동일하지 않습니다.

 

즉, React.memo는 자바스크립트의 이러한 동작 때문에 값이 변경되었다고 인식하고 리렌더링이 되는 것입니다.

 

그럼 이런 상황은 어떻게 해결해야 할까요?

 

바로 useCallback으로 해결할 수 있습니다.

 

다음 글은 useCallback에 대해서 알아보겠습니다.