(React) useMemo, useCallback 필요성 및 사용법

useEffect 사용해서 Data를 마운트 시킬 때, 반복해서 Data를 가져오는 경우가 있다.

useEffect가 처음에 한번 불러와진다고 해서, Data가 한번만 불리는 건 아니다.

45개의 숫자를 뽑고, 거기서 6개 숫자를 뽑아오는 구문이 계속 반복한다.

나는 분명 한번만 실행시켰는데...

 

useEffect가 데이터를 기억하지 못하기 때문에 발생하는 것인데

그럴 때, 캐시에 잠시 데이터를 보관하고 데이터가 변경이 생길 때만 재실행되도록 할 수 있다.

그게 바로 useMemo 이다. 아래와 같이 코드를 변경한다.

  const lottoNumbers = useMemo(() => getWinNumbers(), []);
  const [winNumbers, setWinNumbers] = useState(lottoNumbers);

이렇게 바꾸니까 딱 1번만 실행된다. 신기한 기능이다.

React hooks 가 렌더링할 때, 전체 코드를 계속 반복하기 때문에 비효율이 발생한다.

복잡한 함수의 리턴값을 보관할 때에는 useMemo를, 간단한 데이터를 보관할 때는 useRef를 사용한다.

그러면, useCallback은?? useCallback은 함수 자체를 기억해둔다.

함수 생성 비용이 너무 클 경우에 useCallback으로 감싼다. 

  const onClickRedo = useCallback(() => {
    setWinNumbers(getWinNumbers());
    setWinBalls([]);
    setBonus(null);
    setRedo(false);
    timeouts.current = [];    
    
  }, [winNumbers]);

아래있는 [ ]의 값이 바뀔 때만 실행되도록 한다.

만약에, [ ]값을 지정하지 않으면 기억력이 너무 좋아서, 값들이 변경이 안된다.

그러면, useCallback은 언제 꼭!!!!!!!!!!!!!!! 사용해야할까?

자식에게 props로 함수를 전달할 때는 꼭 해당 함수를 useCallback으로 감싸주어야 한다.

그래야만, 전달하는 props가 변경이 되지 않아 자식 컴포넌트가 헷갈리지 않는다.