[코드캠프 7주차]memoization

메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서(캐싱) 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다.

리액트에서도 이런 메모이제이션을 위한 훅이 존재한다.
useMemo 와 useCallback 이다.
우선 기본적으로 리액트에서 화면을 렌더링 해주는 조건은 3가지 이다.
1.state 가 변경되었을때
2.props 가 변경되었을때
3.부모 컴포넌트가 렌더링 되었을 때

[useMemo]

기본적으로 useMemo는 최적화에 관련된 Hook 이다.
리액트의 화면 렌더링은 상태값이 변경이 되면 재렌더링이 된다.
하지만 예를 들어서 나는 카운트의 상태값만 변경을 했는데 문자까지 동시에 렌더링이 다시 한번 된다면?
뭔가 의미가 없는 렌더링이 발생한 것이다.
이러한 부분을 방지하기 위해서 useMemo 가 적용될수 있다.

import React,{useMemo} from "react";
import "./styles.css";

const ShowState = () => {
  
  const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};
  
  //여기가 중요!
  const showNumber = useMemo(()=>getNumber(number),[number]);
  const showText = useMemo(()=>getText(text),[text]);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;

실제로 확인해보면 숫자의 상태값만 변경됬을때만 콘솔에 출력되고 글자가 변동되었을때 글자만 변동되는것을 확인 할 수있다.

[useCallback]

useCallback 도 리액트의 최적화 Hook 이다.
사용법은 useMemo 와 동일하지만 약간의 차이점이 있다.
useMemo는 값을 반환하지만 useCallback은 콜백을 반환한다.
의존성 배열을 넣어주게 된다면 console 에 콜백이 찍혀지는 것을 확인 할 수 있다.
사용방법은 아래와 같다.

import React,{useMemo,useCallback} from "react";
import "./styles.css";

const ShowState = () => {
  
  const getNumber = (number) => {
  console.log("숫자가 변동되었습니다.");
  return number;
};

const getText = (text) => {
  console.log("글자가 변동되었습니다.");
  return text;
};
  
  
  //여기가 중요!
  const showNumber = useMemo(()=>getNumber(number),[number]);
  const showText = useCallback(()=>getText(text),[text]);

  return (
    <div className="info-wrapper">
      {showNumber} <br />
      {showText}
    </div>
  );
};

export default ShowState;