[React] useMemo와 useCallback

useMemo

useMemorize를 줄여 useMemo라고 한다.

useMemo는 useEffect가 특정 변수 값이 변경되면 호출되듯 특정 변수 값이 변경되어야만 렌더링이 되게끔 하는 Hook이다.

setState가 발생하면 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링된다.

이 때, 연산을 거쳐 값을 출력하는 경우 값이 바뀌지 않더라도 연산이 리렌더링 마다 발생하게 된다.

불필요한 연산이 발생하는 것이다.

이를 위해 useMemo를 사용해, 함수의 불필요한 호출을 막는다.

단, 렌더링이 이루어지지 않는 것은 아니다. 이는 컴포넌트 최적화가 필요한 부분이다.

 

  const userCount = () => {
    console.log("갱신");
    return userList.length;
  };

return(
<div>
...
..
 <h4>유저수 :{userCount()}</h4>
...
)

위의 코드의 경우 컴포넌트에서 함수를 통해 값을 출력한다. setState가 발생할 때마다 해당 함수가 호출되어

값이 변하지 않더라도 함수의 연산을 반복한다. input을 입력할 때 타이핑 마다 리렌더링이 발생해 함수가 호출되어 성능에 치명적이다.

 

return (
...
...
<h4>
        등록수 :
        {useMemo(() => {
          console.log("갱신");
          return userList.length;
        }, [userList.length])}
      </h4>

useMemo를 사용하면 deps 내의 변수가 변경되지 않는 경우에는 Stateless한 요소가 되어 함수가 호출되지 않는다.

 

 

useCallback

useMemo가 변수와 관련된 hook이라면 useCallback은 함수와 관련된 hook이다.

함수형 컴포넌트에서는 리렌더링시 함수가 재 정의된다. 큰 리소스를 소모 하지는 않지만 최상의 성능을 위해서는

useCallback을 사용하는 것이 필수적이다.

  const onRemove = useCallback(
    (id) => {
      setResult(userList.filter((e) => e.id !== id));
    },
    [userList]
  );

 

 

deps

hook 함수부 내에서 사용되는 props, state는 반드시 deps 내에 들어가야한다.

deps내의 변수가 변경되면 해당 hook이 재배치 되므로 항상 최신의 값을 사용할 수 있는 것이다.