간단한 코드 2개

• App.js

import { useEffect, useState } from "react";
import AppChild from "./AppChild";

const App = () => {
  const [count, setCount] = useState(0);
  const clickIncrease = () => {
    setCount(count + 1);
  };

  console.log("App rendering");

  useEffect(() => {
    console.log("App useEffect ");
  }, []);

  const clickChild = () => {
    console.log("clickChild");
  };

  return (
    <div>
      <button onClick={clickIncrease}></button>
      <AppChild clickAppChild={clickChild}></AppChild>
    </div>
  );
};

export default App;

• AppChild.jsx

import { useEffect, useState } from "react";

const sum = (n) => {
  console.log("sum calculate start");
  let result = 0;
  for (let i = 1; i <= n; i += 1) {
    result += i;
  }
  console.log("sum calculateend");
  return result;
};

const Child = ({ clickChild }) => {
  const [sumNum, setSumNum] = useState(100000000);
  const result = sum(sumNum);
  console.log("Child rendering");
  useEffect(() => {
    console.log("Child useEffect ");
  }, []);

  return <div onClick={clickChild}>child , {result}</div>;
};

export default Child;

코드설명

App컴포넌트는 버튼을 누르면 상태값 count가 증가하는것이 있고
AppChild에서 받아 이벤트를 부모 컴포넌트인 App에서 동작하게하는 clickChild 가 있다.

AppChild컴포넌트에서는 click 이벤트가 있고 이를 부모 컴포넌트로 올려주는 clickChild가 있다.
그리고 sum함수를 통해 result가 존재한다.

실행결과보기

기본적인 초기 콘솔 결과이다.
App 콘솔출력 -> return의 AppChild을 만나 AppChild 컴포넌트 코드실행 -> AppChild 컴포넌트의 sum 실행 -> AppChild 콘솔출력 -> AppChild가 렌더링이되면 useEffect 실행 및 콘솔 추가 -> App이 렌더링이되면 useEffect 실행 및 콘솔 추가

버튼을 누르게 된다면(2번실행) App과 Child 모두 리렌더링된다.
우리는 count값은 Child와 연관이 없는데도 단지 부모컴포넌트가 렌더링된다는 이유로 같이 렌더링된다. 이로인해 sum 함수 또한 실행된다.

useMemo 사용하기

sum 함수는 단지 영향을 받는 sumNum 에 의해서만 실행되게 하고 싶다.
해당 코드를 수정해본다.

  const result = useMemo(() => sum(sumNum), [sumNum]);

2번 클릭을 눌렀을 때 AppChild의 sum함수는 sumNum의 값이 바뀌지않는 이상 하지않아 불필요한 sum함수의 실행과 관련된 렌더링이 발생하지 않는다.

memo 사용하기

잠시 코드에서 이벤트를 props로 주는 코드를 아래와같이 생략해보자

• App.js

import { useEffect, useState } from "react";
import AppChild from "./AppChild";

const App = () => {
  const [count, setCount] = useState(0);
  const clickIncrease = () => {
    setCount(count + 1);
  };

  console.log("App rendering");

  useEffect(() => {
    console.log("App useEffect ");
  }, []);

  // const clickChild = () => {
  //   console.log("clickChild");
  // };

  return (
    <div>
      <button onClick={clickIncrease}></button>
      <AppChild></AppChild>
    </div>
  );
};

export default App;

• AppChild.jsx

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

const sum = (n) => {
  console.log("sum calculate start");
  let result = 0;
  for (let i = 1; i <= n; i += 1) {
    result += i;
  }
  console.log("sum calculateend");
  return result;
};

const Child = () => {
  const [sumNum, setSumNum] = useState(100000000);
  const result = useMemo(() => sum(sumNum), [sumNum]);
  console.log("Child rendering");
  useEffect(() => {
    console.log("Child useEffect ");
  }, []);

  return <div>child , {result}</div>;
};

export default Child;

현재도 마찬가지로 버튼을 눌러 App의 count 상태값이 바뀐다면 AppChild가 리렌더링이 되어 console.log('Child rendering') 이 실행된다.

memo를 추가하기

• AppChild.jsx

  memo로 Child 컴포넌트를 전체를 묶어준다.
  이를 통해 부모 컴포넌트가 렌더링되더라도 자식 컴포넌트가 렌더링되는 것을 막아준다.

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

const sum = (n) => {
  console.log("sum calculate start");
  let result = 0;
  for (let i = 1; i <= n; i += 1) {
    result += i;
  }
  console.log("sum calculateend");
  return result;
};

const Child = memo(() => {
  const [sumNum, setSumNum] = useState(100000000);
  const result = useMemo(() => sum(sumNum), [sumNum]);
  console.log("Child rendering");
  useEffect(() => {
    console.log("Child useEffect ");
  }, []);

  return <div>child , {result}</div>;
});

export default Child;

이와같이 버튼을 눌러 count가 바뀌어도 AppChild가 리렌더링되지않는다.

useCallback 사용하기

다시 처음의 App.js와 AppChild.jsx에서 memo와 useMemo를 추가하여 돌아가보자

• App.js

import { useEffect, useState } from "react";
import AppChild from "./AppChild";

const App = () => {
  const [count, setCount] = useState(0);
  const clickIncrease = () => {
    setCount(count + 1);
  };

  console.log("App rendering");

  useEffect(() => {
    console.log("App useEffect ");
  }, []);

  const clickChild = () => {
    console.log("clickChild");
  };

  return (
    <div>
      <button onClick={clickIncrease}></button>
      <AppChild clickChild={clickChild}></AppChild>
    </div>
  );
};

export default App;

• AppChild.jsx

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

const sum = (n) => {
  console.log("sum calculate start");
  let result = 0;
  for (let i = 1; i <= n; i += 1) {
    result += i;
  }
  console.log("sum calculateend");
  return result;
};

const Child = memo(({ clickChild }) => {
  const [sumNum, setSumNum] = useState(100000000);
  const result = useMemo(() => sum(sumNum), [sumNum]);
  console.log("Child rendering");
  useEffect(() => {
    console.log("Child useEffect ");
  }, []);

  return <div onClick={clickChild}>child , {result}</div>;
});

export default Child;

해당 코드에서는 버튼을 눌러(2번클릭) count 상태값이 바뀌면 AppChild가 리렌더링된다.
이는 매개변수로 온 clickChild가 App 컴포넌트가 리렌더링되면서 이전과 다른 값으로 인식되기 때문이다.

useCallback 적용하기

• App.js 적용

  const clickChild = useCallback(() => {
    console.log("clickChild");
  }, []);

기존 함수에서 전체를 useCallback으로 묶어서 처리한다.

이를 통해 App이 렌더링되어도 clickChild가 재정의되면서 새로운 정의가 될필요없고(주소값이 바뀔필요도없고) 이를 바뀌는 것으로 인식하지않아서 AppChild가 리렌더링될 필요도 없다.

정리하기

• App.js

import { useEffect, useState, useCallback } from "react";
import AppChild from "./AppChild";

const App = () => {
  const [count, setCount] = useState(0);
  const clickIncrease = () => {
    setCount(count + 1);
  };

  console.log("App rendering");

  useEffect(() => {
    console.log("App useEffect ");
  }, []);

  const clickChild = useCallback(() => {
    console.log("clickChild");
  }, []);

  return (
    <div>
      <button onClick={clickIncrease}></button>
      <AppChild clickChild={clickChild}></AppChild>
    </div>
  );
};

export default App;

• AppChild.jsx

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

const sum = (n) => {
  console.log("sum calculate start");
  let result = 0;
  for (let i = 1; i <= n; i += 1) {
    result += i;
  }
  console.log("sum calculateend");
  return result;
};

const Child = memo(({ clickChild }) => {
  const [sumNum, setSumNum] = useState(100000000);
  const result = useMemo(() => sum(sumNum), [sumNum]);
  console.log("Child rendering");
  useEffect(() => {
    console.log("Child useEffect ");
  }, []);

  return <div onClick={clickChild}>child , {result}</div>;
});

export default Child;

memo , useMemo ,useCallback은 각각의 필요한 상황이 존재한다.
memo는 부모가 단지 리렌더링된다고( 부모로부터 받은 props가 바뀐것도 아닌데) 자식이 리렌더링 되는 것을 막고
useMemo는 리렌더링이 되는 컴포넌트 내부에서 시간이 많이드는 함수계산을 하여 값을 반환하는 것을 불필요한 실행을 막기 위해 사용하고
useCallback은 리렌더링에 의해 불필요한 재정의를 통해 props로 전달되어 상태변화로 인식되어 자식에서 불필요한 리렌더링을 실행하게 만드는 것을 막아준다. (memo로도 부모로부터 받은 props가 변했다면 막아 줄 수가 없기 때문)