📌

의존성 배열을 사용한다는 것 때문인지 두 훅이 종종 헷갈렸다. 그래서 useEffect와 useCallback의 공통점과 차이점을 정리해 보았다.

◼ 공통점

1. Hooks
   둘 다 React의 Hook으로, 함수형 컴포넌트 내에서 상태 관리와 생명주기 관리 기능을 제공합니다.
2. 의존성 배열
   두 Hook 모두 의존성 배열을 받아 특정 값이 변경될 때만 함수가 호출되도록 제어할 수 있습니다.

◼ 차이점

useEffect

목적

컴포넌트가 렌더링된 후 사이드이펙트(side effect)을 수행하는 데 사용됩니다. 예를 들어, 데이터 fetching, 구독(subscription), DOM 직접 조작 등이 있습니다.

구문

useEffect(() => {
    // 사이드 이펙트 수행
    return () => {
        // 클린업 함수
    };
}, [의존성 배열]);

사이드 이펙트(Side Effect)
외부 세계와의 상호작용을 통해 발생하는, 예측이 어려운 결과를 말합니다.

클린업(Clean Up)
사이드 이펙트의 정리(Clean Up)는 리액트에서 사이드 이펙트를 올바르게 수행하는 데 있어 중요한 부분입니다. useEffect내에서 반환하는 함수는 클린업을 위한 함수입니다. 이 함수는 컴포넌트가 언마운트(삭제)될 때나 의존성 배열에 지정된 값이 변경될 때 호출됩니다.

useCallback

목적

함수의 인스턴스가 재사용되도록 메모이제이션합니다. 주로 자식 컴포넌트에 props로 함수를 전달할 때 사용되며, 불필요한 렌더링을 방지하는 데 도움을 줍니다.

구문

const memoizedCallback = useCallback(() => {
    // 메모이제이션된 함수의 내용
}, [의존성 배열]);

의존성 배열
의존성 배열의 값이 변경될 때만 새로 생성됩니다. 이를 통해 자식 컴포넌트가 불필요하게 렌더링되는 것을 방지할 수 있습니다.

◼ 정리

• useEffect는 주로 컴포넌트의 사이드이펙트를 관리하는 데 사용됩니다.
• useCallback은 특정 함수의 인스턴스가 불필요하게 재생성되는 것을 방지하는 데 사용됩니다.