6. useMemo (1)

6.1 useMemo 개요

6.1.1 메모이제이션(Memoization)이란?

6.1.2 함수형 컴포넌트

function calc(a, b) {
  return a + b
}

// 함수형 컴포넌트
const MyComponent() {
  const result = calc(3,5)

  return <p>{result}</p>
}

6.2 useMemo의 기본 구조

// 빈 배열이 들어간 경우
const result = useMemo(() => calc(a, b), []);     

// 요소가 들어간 경우
const result = useMemo(() => calc(a, b), [item); 

6.2.1 useEffect 와 useMemo의 차이

6.3 useMemo 사용해보기

6.3.1 (실습1) useMemo 사용해보기

import React, { useState,useMemo } from 'react';
import ShowState from './ShowState';

export default function App() {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState('');

  // 무거운 연산을 실행하는 함수
  function heavyCalc() {
    let s = 0;
    for (let i = 0; i < 1000000000; i++) {
      s += i;
    }
    return s;
  }
  let calc = heavyCalc();

  // number 값 바꿔주는 함수
  const increaseNum = () => {
    setNumber((prev) => prev + 1);
  };

  const decreaseNum = () => {
    setNumber((prev) => prev - 1);
  };

  // text값 바꿔주는 함수
  const handleText = (e) => {
    setText(e.target.value);
  };

  return (
    <>
      <h4> ✨ 엄청난 연산값</h4>
      <p>{calc}</p>

      <h4> ✨ 숫자바꾸기</h4>
      <button onClick={increaseNum}>+</button>
      <button onClick={decreaseNum}>-</button>

      <h4> ✨ 글자바꾸기</h4>
      <input type="text" onChange={handleText} />
      <ShowState number={number} text={text} />
    </>
  );
}

import React, { useMemo } from 'react';

export default function ShowState({ number, text }) {
  const consoleNumber = (number) => {
    console.log('숫자가 변경되었습니다.');
    return number;
  };

  const consoleText = (text) => {
    console.log('글자가 변경되었습니다.');
    return text;
  };

  const showNum = consoleNumber(number);
  const showText = consoleText(text);

  return (
    <div>
      <p> 숫자 : {showNum}</p>
      <p> 글자 : {showText}</p>
    </div>
  );
}

  const calc = useMemo(() => {
    return heavyCalc();
  }, []);

  const showNum = useMemo(() => consoleNumber(number), [number]);
	  const showText = useMemo(() => consoleText(text), [text]);

6.3.2 (실습2) useMemo 사용해보기

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

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

  const answer = isTrue ? "true" : "false";

  // answer가 바뀔 때만 콘솔이 찍히도록 작성 
  useEffect(() => {
    console.log("answer이 변경되었습니다.");
  }, [answer]);

  return (
    <div>
      <p>✨ number</p>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <hr />
      <p>✨ answer</p>
      <p>T or F ? {answer}</p>
      <button onClick={() => setIsTrue(!isTrue)}>Click</button>
    </div>
  );
}
export default App;

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

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

  const answer = { bool: isTrue ? "true" : "false" };

  useEffect(() => {
    console.log("answer이 변경되었습니다.");
  }, [answer]);

  return (
    <div>
      <p>✨ number</p>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <hr />
      <p>✨ answer</p>
      <p>T or F ? {answer.bool}</p>
      <button onClick={() => setIsTrue(!isTrue)}>Click</button>
    </div>
  );
}
export default App;

  const answer = useMemo(() => {
    return { bool: isTrue ? "true" : "false" };
  }, [isTrue]);