1. 메모이제이션이란 ?

1. 기존 값을 기억후 특정 이벤트가 실행된 뒤의 값이 이전 값과 동일시 해당 값을 재사용하는 기법
2. Memoized된 내용을 재사용하여 렌더시, 가상 DOM에서는 바뀐 부분을 확인하지 않음 이로써 성능의 향상
3. 과한 메모이제이션은 오히려 성능을 악화시킬수있어 주의하여야함

1-1. 메모이제이션이란 ? (심화)

1. 리액트뿐만 아닌 컴퓨터 프로그래밍의 용어로 한번 계산한 결과를 메모리에 저장해 두었다가 꺼내쓰는 기법임
2. 최적화 이론중 동적 계획법 의 핵심이 되는 기술로 메모리 라는 공간비용을 투입하여 계산에 소모되는 시간 비용을 줄이는 방식이다 실무에서는 캐싱 이라는 단어를 더 많이 사용한다.
3. "예시 이미지" 위의 예시에서 하늘색 사각형 부분이 메모이제이션을 사용한 부분. 메모이제이션을 사용하지 않았더라면 동일한값을 계속하여 계산하였을거임.

2. 사용법 한 가지 (useMemo)

const SumCalculator = () => {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);

  const sum = useMemo(() => {
    console.log('계산 중'); // 디펜던시의 값이 바뀌지않는이상 재실행이 없음
    return number1 + number2;
  }, [number1, number2]);

  return (
    <div>
      <h2>더하기 계산기</h2>
      <input
        type="number"
        value={number1}
        onChange={(e) => setNumber1(parseInt(e.target.value))}
      />
      <input
        type="number"
        value={number2}
        onChange={(e) => setNumber2(parseInt(e.target.value))}
      />
      <h3>결과: {sum}</h3>
    </div>
  );
};

number1 or number2의 값이 바뀌지않는이상 useMemo를 통하여 한번 계산된 값을 재사용함