[React .hook] Examples of using useMemo

Before we start

 

2024.02.22 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useMemo ?

[React .hook] What is useMemo ?

 

전 게시글에서는 useMemo가 어떤일을 하는지 왜 사용이 되는지에 대해서

 

자세하게 알아보는 시간을 가졌다.

 

만약 useMemo가 왜 존재하는지, 어떤이유로 사용이되어지는지,

 

어떻게 사용이 되는지알고싶다면

 

위의 게시글을 완독하고 오길 권한다.

 

examples of using useMemo

 

ex1

 

import React, { useMemo, useState } from 'react';

const hardCalculate = (number) => {
  console.log('어려운 계산!');
  for (let i = 0; i < 99999; i++) {} // 강제지연
  return number + 10000;
};

const easyCalculate = (number) => {
  console.log('쉬운 계산!');
  return number + 1;
};

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  // const hardSum = hardCalculate(hardNumber);
  const hardSum = useMemo(() => {
    return hardCalculate(hardNumber);
  }, [hardNumber]);
  const easySum = easyCalculate(easyNumber);

  return (
    <div>
      <h3>어려운 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => setHardNumber(parseInt(e.target.value))}
      />
      <span> + 10000 = {hardSum}</span>

      <h3>쉬운 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => setEasyNumber(parseInt(e.target.value))}
      />
      <span> + 1 = {easySum}</span>
    </div>
  );
}

export default App;

 

어려운 계산기를 사용했을 때

 

쉬운 계산기를 사용했을 때

 

이와 같이 useMemo에 넣어둔 value는 해당 직접 해당 어려운 계산 함수를 호출하는게 아닌이상

 

Rendering 될 때 호출되지 않는다.

 

쉬운 계산기를 두들길 때,

 

어려운 계산 함수는 동작하지 않고,

 

useMemo로 value를 가져와서 Redering 한다.

 

ex2

 

import React, { useEffect, useMemo, useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [isKorea, setIsKorea] = useState(true);

  const location = {
    country: isKorea ? '한국' : '외국',
  };

  useEffect(() => {
    console.log('useEffect 호출');
  }, [location]);

  return (
    <div>
      <h2>하루에 몇끼 먹어요?</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => {
          setNumber(e.target.value);
        }}
      />
      <hr />
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>비행기 타자</button>
    </div>
  );
}

export default App;

 

해당 코드를 잘 살펴보자

  useEffect(() => {
    console.log('useEffect 호출');
  }, [location]);

 

해당 부분의 코드를 잘 살펴보면

 

useEffect로 의존성 주입을

 

location으로 하고 있는데

 

number 의 값이 변경이 될 때마다

 

리렌더링이 되는 것 같다.

 

왜 그럴까?

 

2024.02.23 - [📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/JavaScript] - [JavaScript] 원시 타입과 객체 타입의 차이점

[JavaScript] 원시 타입과 객체 타입의 차이점

 

해당 글에서 잘 정리해 놓았다 궁금한 사람은 알아보자...

 

각설하고,

 

location을 어떻게 고쳐야할까?

 

import React, { useEffect, useMemo, useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [isKorea, setIsKorea] = useState(true);

  const location = useMemo(() => {
    return {
      country: isKorea ? '한국' : '외국',
    };
  }, [isKorea]);

  useEffect(() => {
    console.log('useEffect 호출');
  }, [location]);

  return (
    <div>
      <h2>하루에 몇끼 먹어요?</h2>
      <input
        type="number"
        value={number}
        onChange={(e) => {
          setNumber(e.target.value);
        }}
      />
      <hr />
      <h2>어느 나라에 있어요?</h2>
      <p>나라: {location.country}</p>
      <button onClick={() => setIsKorea(!isKorea)}>비행기 타자</button>
    </div>
  );
}

export default App;

 

 

위의 코드처럼 수정을 하니까

 

비행기 타자버튼을 onClick 하여

 

isKorea의 데이터 값을 변경하면

 

useEffect가 호출되며 Reredering되지만

 

 

아까 발생했던 문제인

 

number의 데이터 값이 변경되어도

 

useEffect가 다시 호출되며 Reredering 되는 문제가 사라졌다.

 

이 글을 마치며...

 

해당 글은 아래의  별코딩 유튜버님의 영상을 참고하여 제작하였습니다.

* 해당 저작물 관련하여 개인적으로 posting permission 받았습니다.

https://www.youtube.com/watch?v=e-CnI8Q5RY4