[React] useMemo / useCallback

Memoization 메모이제이션

function App() {

                const a =10

                return (

                                <div></div>

                )

}

function calculate() {

                return 10

}

1. useMemo

계속 재연산 하지않고 연산된 값을 재사용하도록 함

useMemo(콜백함수, 의존성 배열)

ex> const value = useMemo(()=>{

                return caculate()

},[])

 

2. useCallback

함수 재사용하기

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용

useCallback(콜백함수, 의존성 배열)

 

---

 

App.js

import './App.css';
import { useState, useEffect, useCallback } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [ name, setName ] = useState('');
  const myFunction = useCallback(() => {
    console.log(`myFunction: number ${number}`)
    return
  }, [number])
  // 위 배열에 number 넣어줘야 변경 된 값이 콘솔에 찍힘

  useEffect(()=>{
    console.log('myFunction이 변경되었습니다.')
  }, [myFunction]);
  return (
    <div className="App">
      <input type="number"
      value={number}
      onChange={(e)=> setNumber(e.target.value)}
      />
      <br />
      <button onClick={myFunction}>함수호출</button>
      <br />
      <input type="text"
      value={name}
      onChange={(e)=> setName(e.target.value)}/>
    </div>
  );
}

export default App;

 

App2.js

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

const calculate = (number) => {
    console.log("복잡한 계산");
    for(let i = 0; i < 1000000000; i++) {}   // 시간
    return number+10000;
}
const calculate2 = (number) => {
    console.log("단순한 계산");
    return number+1;
}

const App2 = () => {
    const [number1, setNumber1 ] = useState(1);
    const [number2, setNumber2 ] = useState(1);
    // const sum1 = calculate(number1);
    const sum1 = useMemo(()=>{
        return calculate(number1)
    },[number1]) // number1이 바뀔 때만 
    const sum2 = calculate2(number2);
    return (
        <div>
            <h3>복잡한 계산기</h3>
            <input type="number"
            value={number1}
            onChange={(e)=> setNumber1(parseInt(e.target.value))} />
            <span>+ 10000 = {sum1}</span>
            <h3>단순한 계산기</h3>
            <input type="number"
            value={number2}
            onChange={(e)=> setNumber2(parseInt(e.target.value))} />
            <span>+ 1 = {sum2}</span>
        </div>
    );
};

export default App2;

 

App3.js

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

const App3 = () => {
    const [number, setNumber] = useState(0);
    const [isKorea, setIsKorea] = useState(true);
    // const location = isKorea? "한국" : "외국";

    // const location = {
    //     country: isKorea ? "한국" : "외국"
    // }

    const location = useMemo(()=>{
        return {
            country: isKorea ? '한국' : '외국'
        }
    }, [isKorea])
    useEffect(()=>{
        console.log("useEffect 호출")
    }, [location])
    return (
        <div>
            <h1>어떤 숫자를 좋아하세요?</h1>
            <input 
            type="number"
            value={number}
            onChange={(e)=> setNumber(e.target.value)}
            />
            <h1>어느 나라에 있어요?</h1>
            {/* <p>나라: {location} </p> */}
            <p>나라: {location.country} </p>
            <button onClick={()=>setIsKorea(!isKorea)}>여행가자</button>
        </div>
    );
};

export default App3;