[React]리액트 훅(React Hook) - useCallback과 useEffect

useCallback

보통 React 컴포넌트의 렌더링이 일어날 때, 함수형 컴포넌트 내부의 함수들은 매 렌더링 시 새롭게 생성된다. 이는 불필요한 자식 컴포넌트들의 재랜더링으로 이어질 수 있는데 useCallback은 이러한 문제를 해결하기 위해 사용된다.

 

usecallback은 함수를 캐싱해서 재사용한다. 따라서 컴포넌트가 재실행 될때, 함수 내의 변수들이 초기화(새롭게 생성)되지 않는다.

usecallback을 사용하면 함수 메모리의 주소가 객체에 할당된다. 컴포넌트가 렌더링될때 새로운 주소가 할당되는 것이 아니라 이전에 저장했던 주소가 계속 사용되는 것이다.

 

useCallback(() => { }, []); : 기본적으로 콜백함수와 의존성배열을 인자로 받는다.

 

const [category, setCategory] = useState('all')

//onSelect 함수를 통해 category 값이 업데이트
const onSelect = useCallback(Category => setCategory(Category), [])

 

useCallback의 두 번째 매개변수인 빈 배열 ([])은 함수가 의존성을 가지지 않음을 나타낸다. 따라서 컴포넌트가 처음 렌더링될 때만 함수가 생성되며, 이후에는 재사용된다.

 

useEffect

useEffect는 데이터 가져오기, 구독 설정, 타이머 실행과 같은 side effects를 수행하는 데 사용된다. 컴포넌트가 렌더링될 때나 컴포넌트의 상태가 변경될 때 특정 작업을 수행하는 데에 쓰인다.

 

useEffect 형태

1. useEffect( () ⇒ {  } ): 기본적으로 콜백함수를 인자로 받는다. 함수가 렌더링 될때마다 실행된다.
   
   
2. useEffect( () ⇒ {  },[] ): 콜백함수와 의존성 배열을 인자로 받는다. 함수가 맨 처음만 실행되고 배열 안의 값이 바뀔때만 함수가 재실행된다.

// 1초마다 타이머 실행되는 함수

useEffect(() => { 
    // 컴포넌트가 마운트될 때 실행

    const timer = setInterval(() => {
        console.log('timer start');
    }, 1000);

    // 컴포넌트가 언마운트될 때 실행
    return () => {
        clearInterval(timer); 
        console.log('timer end');
    };
}, []); // 빈 배열은 컴포넌트가 마운트될 때 한 번만 실행되도록 하고, 언마운트시 정리된다.

 

useEffect내에 return문은 컴포넌트가 언마운트될 때 정리할 작업을 수행한다. 따라서 async를 useEffect 사용시에 붙여 사용하면 안된다. 비동기 작업이 끝나기 전에 컴포넌트가 이미 언마운트되어 정리 작업을 할 수 없는 상황이 발생할 수 있기 때문에 주의해야한다.