React.memo, useCallback

📕 코드 스쿼드 수업 도중 너무 신기하고 중요한 내용을 듣게 되어 수업 도중 공유해 주신 코드를 사용하여 개인 공부를 위해 간단하게 정리해보았습니다 ~

React.memo 사용 예시

간단한 코드로 리렌더링 최적화에 대해 공부를 해봅시다.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <Child data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

렌더링 될때마다 App에서 console.log("App")을 찍고, 불러온 자식컴포넌트도 console.log("Child")를 실행시켜줘서 리렌더링이 되는지 확인해봅시다.

코드를 실행시키면 이런 창이 뜹니다.

일단 해당 코드를 실행시키고 버튼을 2~3번 누르면 아래와 같은 결과가 나타납니다.

Child에 변화가 없지만 계속 렌더링 되는 것을 보실 수 있습니다.

React.memo로 child를 감싸보겠습니다.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

그러면 아래와 같은 결과가 나타납니다.

보시는것과 같이 child가 리렌더링되지 않습니다.

수업을 들으면서 좀 신기한? 최적화 테스팅 방법이 있기에 기록겸 공유해봅니다.

Profiler 사용하여 렌더링 상태 확인해보기

1. 개발자 도구를 켜서 Profiler 탭을 열어봅니다.

2. 녹화버튼을 누르고, 위의 코드에 의해 뜬 페이지의 버튼을 4~5번정도 눌러봅니다

3. 리렌더링이 된 지 확인하기 위해 오른쪽의 바들을 클릭해봅니다.

현재 react.memo를 쓴 상태이기에, Child 컴포넌트가 다시 렌더링 되지 않았다고 뜹니다.

useCallback 사용 예시

clickHandler이라는 함수를 만들어서 MemoChild에 내려주겠습니다.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();
  const clickHandler = () => console.log("Clicked");

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild clickHandler={clickHandler} data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

뭔가 React.memo가 알아서 "😑얘 똑같은 함수에요 ~" 라고 판단하고 리렌더링을 막아줄 것 같지만 콘솔창을 보니 그렇게 작동하지 않는다.

그 이유는, memo로 감싼 컴포넌트에서 자기가 가지고 있는 clickHandler를 계속 비교를 하겠지만, App이 리렌더링 될 때마다 새로운 clickHandler를 생성시키고 내려주기 때문에, Child가 계속 리렌더링이 된다

이를 해결하기 위해서 useCallback으로 함수를 감싼다.

위에서 확인해본 Profiler을 통해 어떤식으로 리렌더링이 되는지 확인해봅시다.

Why did this render?에 보면 Props changed라며 "clickHandler에 변경이 생겼기에 Child가 리렌더링 됐다~" 라고 알려주고 있습니다.

👀 참고: 수업도중에 왜 나는 저 Why did this render이 안뜨지? 라고 생각했는데 따로 설정하면 됩니다~

톱니바퀴 아이콘을 눌러서 Profiler탭에 들어가고, 아래에 표시한 체크를 활성화 시키면 됩니다!

다시 코드로 돌아가서, 이제 useCallback을 적용해보겠습니다.

import React, { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  console.log("App");
  const [, setState] = useState();
  const clickHandler = useCallback(() => {
    console.log("Clicked!");
  }, []);

  return (
    <div className="App">
      <h1>react performance</h1>
      <button onClick={() => setState(Math.random())}>부모강제렌더링</button>
      <MemoChild clickHandler={clickHandler} data="str" />
    </div>
  );
}

function Child(props) {
  console.log("Child");
  return <div>{props.data}</div>;
}

export const MemoChild = React.memo(Child);

리렌더링이 되지 않습니다 ~ 👏👏👏