useMemo 잘 사용하기 1일차

난.. 왜 useMemo를 잘 사용하지 못할까...
다들 잘 쓰고있겠지..?

잘 사용할 날까지 매일 매일 하나씩 useMemo 실습 코드를 쳐보자..
과연 몇일차까지 난 이걸 하고 있을까?

오늘은 실전 리액트 프로그래밍에 아주 짧게 한장도 안나오는 코드를 쳐보려 한다..

---

import React, {useMemo} from 'react';
import {runExpensiveJob} from './util';

function Dody({val1, val2}){
  const value = useMemo(() => runExpensiveJob(val1, val2), [val1, val2])
  return <div>{value}</div>
}

useMemo의 첫번째 매개변수는 함수, 두번째 매개변수는 배열이다.
useMemo는 함수가 return한 값을 기억한다.
배열에 저장된 값이 변경되지 않으면 이전에 return 된 값을 사용한다.

---

이게 끝이라니 선생님.. 저는 이정도로 이해가 되지 않는ㄴ다구요..
다른 예시를 찾아보자..

import React, {useMemo} from 'react';

funtion getAverage(list){
 console.log('평균 계산중');
 if(list.length === 0) return 0;
 const sum = list.reduce((a,b) => a + b);
 return sum / list.length;
}

function Dody({val1, val2}){
 const [list, setList] = useState([]);
 const [num, setNum] = useState(0);
 
 function handleClick(){
 	setList(list.concat(num));
   setNum(0);
 }
 
 return (
   <>
     <input value={num} onChange={(e) => setNum(e.target.value)}/>
     <button onClick={() => handleClick()}/>
     
     {list.map((val, i) => (
     	<div key={i}>{val}</div>
     )}
     <div>{getAverage(list)}</div>
   </>
 )
}

위의 코드를 실행해보면 평균값을 계산할때 말고도 숫자를 input에 입력할때도 function이 실행된다.
결과값인 평균값이 바뀔때만 실행되게 하려면 아래처럼 바꾸면 된다.

import React, {useMemo} from 'react';

funtion getAverage(list){
 console.log('평균 계산중');
 if(list.length === 0) return 0;
 const sum = list.reduce((a,b) => a + b);
 return sum / list.length;
}

function Dody({val1, val2}){
 const [list, setList] = useState([]);
 const [num, setNum] = useState(0);
 
 function handleClick(){
 	setList(list.concat(num));
   setNum(0);
 }
 
 return (
   <>
     <input value={num} onChange={(e) => setNum(e.target.value)}/>
     <button onClick={() => handleClick()}/>
     
     {list.map((val, i) => (
     	<div key={i}>{val}</div>
     )}
     
     // 여기 수정
     <div>{useMemo(() => getAverage(list), [list])}</div> 
   </>
 )
}