useEffect, useCallback 차이

useEffect

useEffect는 컴포넌트의 라이프사이클에 특정 동작을 연결할 때 사용된다.

컴포넌트가 렌더링된 이후에 비동기 작업을 수행하거나, 외부 API 호출, 이벤트 구독 등의 작업을 수행할 수 있도록 해준다.

 

useEffect(callback, [deps]);

useEffect의 첫 번째 매개변수로 전달되는 콜백 함수는 컴포넌트가 렌더링될 때마다 실행되거나, 특정 의존성이 변경될 때만 실행될 수 있다. 또한, useEffect의 콜백 함수는 반환 값으로 클린업(clean-up) 함수를 반환할 수 있다. 클린업 함수는 컴포넌트가 소멸될 때 실행되거나, 다음 useEffect 실행 전에 호출된다.

 

 

useCallback

useCallback은 콜백 함수의 메모이제이션된 버전을 반환한다. useMemo는 값을 반환하고 useCallback은 함수를 반환한다고 보면 된다. useCallback을 사용하면 콜백 함수가 같은 경우에는 동일한 인스턴스를 반환하므로, 자식 컴포넌트에게 같은 콜백 함수를 계속해서 전달할 때 메모리 사용을 줄일 수 있다. 이 부분이 처음에는 이해가 가지 않았지만 당시에 함수를 캐싱해서 반환하는 것 같다. (근데 그러면 캐싱할 당시의 deps의 값을 캐싱한다..?는 정확한 내부 동작은 아직 이해가 가지 않는다.)

 

useCallback(callback, [deps]);

useCallback의 첫 번째 매개변수로 전달되는 콜백 함수와 의존성 배열을 입력으로 받고, 의존성 배열의 요소가 변경될 때만 새로운 콜백 함수를 생성하고 반환합니다.

 

차이점

useEffect:

useEffect의 콜백 함수는 컴포넌트가 렌더링된 이후에 실행된다. 즉, 생명주기와 관련된 훅이다.

의존성 배열에 있는 요소가 변경되었을 때마다, 콜백 함수가 호출된다.

예를 들어, useEffect(() => { ... }, [dependency])와 같이 사용할 때, dependency의 값이 변경되면 콜백 함수가 실행된다.

 

useCallback:

useCallback은 호출했을 때 메모이제이션된 콜백 함수를 반환한다. 

의존성 배열에 있는 요소가 변경되었을 때만, 새로운 콜백 함수를 생성하고 반환한다.

따라서 의존성 배열의 요소가 변경되지 않으면 이전에 반환된 콜백 함수를 그대로 사용한다.

useCallback(() => { ... }, [dependency])와 같이 사용할 때, dependency의 값이 변경되면 새로운 콜백 함수를 반환한다.

 

자식 컴포넌트에게 넘겨줄 때는?

useEffect로 작성한 함수는 보통 컴포넌트 내부에서 사용한다. 컴포넌트의 라이프 사이클이나 이벤트나 특정 조건에 따라 실행되는 비동기 작업이나 부수적인 동작을 처리하는 데 사용한다. 

 

useCallback은 새로운 함수를 의존성 배열 요소에 따라 반환하기 때문에 자식 컴포넌트에 넘겨줄 때 사용한다.

 

function ParentComponent() {
  useEffect(() => {
    // 비동기 작업 수행
    const fetchData = async () => {
      // API 호출 등 비동기 작업 처리
      const result = await fetchSomeData();
      // 콜백 함수 호출하여 데이터 전달
      onDataFetched(result);
    };

    fetchData();
  }, []);

  const onDataFetched = useCallback((data) => {
    // 자식 컴포넌트에 데이터 전달
    // ...
  }, []);

  return (
    <div>
      <ChildComponent onDataFetched={onDataFetched} />
    </div>
  );
}

다음과 같이 useEffect를 사용해 API 호출을 처리하고, useCallback을 사용해 정의한 함수를 자식 컴포넌트에게 넘겨주면 된다.