React - useMemo 수업시간 중 이상.

궁금증 ... useMemo 여서 ...  컴포넌트가 아닌 js파일명으로 해서 소문자로 했는데 흰화면 에러... 흐음..... 

 

쉬운 계산기만 조작 하여도 어려운 계산기도 같이 렌더링? 되게 되는 것 때문에, 

useMemo... 

렌더링  개념약함 

ㅎ

흠 컴포넌트는 대명사로 시작 ... 하고 

 저 부분은 js 부분이라 생각하여서 소문자로 파일명, 함수 시작해도 된다고 생각했는데 .... 뭐징... 

 

 

---

 

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

function hardCalculate(number) {
  console.log("어려운 계산중");
  for (let i = 0; i < 100000000; i++) {}
  return number + 10000;
}

function easyCalculate(number) {
  console.log("쉬운 계산중");
  return number + 1;
}

const UseMemoComponent = () => {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = hardCalculate(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 UseMemoComponent;

아래 사진 = 위코드 

 

쉬운 계산기만 사용할 때, 

어려운 계산기가 같이 렌더링 당하지 않도록 

useMemo를 이용하여 해당 부분을 수정하기로 한다. 

 

 

 

---

결과화면 , 쉬운계산기만 사용 하면 console.log 에 쉬운 계산중만 뜨는 것을 확인할 수 있다.

 

useMemo를 이용 하여 수정한 코드 

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

function hardCalculate(number) {
  console.log("어려운 계산중");
  for (let i = 0; i < 100000000; i++) {}
  return number + 10000;
}

function easyCalculate(number) {
  console.log("쉬운 계산중");
  return number + 1;
}

const UseMemoComponent = () => {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = useMemo(() => 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 UseMemoComponent;

 

 

변경된 부분만 발췌하면,

  
  const hardSum = hardCalculate(hardNumber);     // 변경 전  
  
  
  const hardSum = useMemo(() => hardCalculate(hardNumber), [hardNumber]);   // 변경 후

 

 

 

~ 수업필기 ~

이전의 코드에서는,

숫자를 변경하는 순간에 렌더링이 된다. 

 

고치고 싶은 부분은 , 

TO 어려운 계산기에게 ,   "너를 건드리지 않으면 ,  실행되면 안되는 거야."  라고 코드상으로 명시를 해주어야 한다. 

useMemo   :   어떤 값을 메모를 해놓는 것 . 

그 값이 변경되지 않는다면 함수가 작동되지 못하도록 

 

값을 재사용하기 위해서 메모리 어딘가에 값을 저장해놓는게 useMemo

 

 + 값을 저장하는데,    

useMemo  :  값을 저장.

useCallback  :  함수를 저장.

 

 

다만, 

 

useMemo사용시 주의점
성능최적화 = , 즉 메모리를 적게 쓰기 위해서 useMemo를 사용하고 있는데 
 ㄴ 값을 재사용하기 위해 별도의 메모리를 할당하여 값을 저장
=>불필요한 값까지 메모이제이션하면 메모리 용량이 늘어나서 
결론적으로 성능이 저하된다.

정말 오래걸리는 작업들만 메모를 해놓아야 한다. 

로직을 저장하는게 아니라 결과값을 저장하는 것이 useMemo이다...