React.js | 입문 | useCallback

useMemo와 비슷한 useCallback이다. 

 

  const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  }, [users, username, email]);

 

 

useCallback 첫번째 파라미터에 연산내용이 담긴 함수를 정의하고, 두번째 파라미터에는 함수에서 쓰이는

상태 값들을 배열에 넣는다.

 

사실상 겉으로 보기에 useCallback을 쓰는것과 안쓰는것은 별반 차이가 없으나, 두번째 파라미터 배열에 담긴 상태 값들의 변경이 없을 경우에 렌더링이 되어도 메모이제이션으로 기억하고있던 함수를 반환하기 때문에 성능향상에 도움이 된다.

 

useMemo와의 차이점은 useMemo는 값(컴포넌트 포함), useCallback은 함수를 호출한다는 점이다. 

 

모든 값들이 바뀔 때마다 전부 리렌더링을 해주면 상당히 비효율적일거 같은데, 다행히도 이런 함수들이 우리를 도와준다.

 

(이런 사소한것들을 놓치면 언제 어떤 상태 값 때문에 리렌더링이 되는지 모르게되고, 콘솔창에 여러 값들이 반복되어 마구 찍히는것을 볼 수 있다는점..)