UseEffect

이 글은 공식문서와 벨로퍼트님의 글을 기반으로 작성되었습니다.

오늘은 리액트 훅 중 하나인 useEffect 에 대해서 알아보자.

useEffect

useEffect는 함수를 인자로 받고 useEffect의 인자로 들어간 함수는 컴포넌트 렌더링이 끝난 후 한 번 실행된다. 그리고 특정 값이 변경되었을 때 다시 실행되게 할 수도 있다.

useEffect(() => {
	실행할 함수...
},[])

위의 useEffect가 선언된 컴포넌트는 첫 렌더링이 끝난 후 단 한 번만 실행된다. 대괄호 부분은 dependencies array로 의존성 배열이다. 의존성 배열을 빈 배열로 만들면 첫 렌더링 때 단 한 번만 useEffect를 실행되게 할 수 있고, 의존성 배열에 특정 변수를 넣게 되면 변수의 값이 변할 때 마다 useEffect가 실행된다.

useEffect는 함수를 반환할 수 있는데 이 함수를 클린업 함수(cleanup function)라고 부른다. 클린업 함수는 컴포넌트가 사라질 때 실행된다. 그 특성으로 useEffect 함수에 대한 뒷정리를 해줄 수 있다.
예를 들면, setInterval과 setTimeout이 적용된 작업들을 clearInterval로 정리할 때 사용할 수 있다.

일반적으로, useEffect 내부에서 실행되는 함수에 사용되는 상태가 있다면, 그 상태를 useEffect의 의존성 배열에 넣어주는 것이 원칙이다. 만약 의존성 배열에 넣지 않게 되면 useEffect가 다시 호출되었을 때, 실행되는 함수의 상태는 최신 상태가 아니게 된다.