[React] useEffect 훅의 clean-up 함수

 

React에서 useEffect 훅은 함수 컴포넌트의 side effect를 수행할 수 있도록 한다.

 

side effect: 흔히 부작용으로 알고 있지만, 프로그래밍에서는 "변화가 발생하는 행위"로 이해하면 된다.

 

 

useEffect의 effect 함수와 clean-up 함수에 대해서 알아보기 전에 React에서 마운트와 언마운트의 개념을 알고 있어야 한다.

• 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다.
• 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다.

 

useEffect의 기본 구조는 아래와 같다.

useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

 

useEffect 기본 구조

 

기본적으로 useEffect는 두번째 인자로 배열 형태의 의존값(dependency)을 필수로 가진다.

의존값이 처음으로 생성 됐을 때와 변경 될 때 이펙트 함수가 실행된다.

 

clean-up 함수는 useEffect의 return 값으로 정의하는데, 컴포넌트가 삭제될 경우 함수가 실행된다.

 

예를 들어, 아래의 코드를 보자.

드롭다운을 구현할때, 드롭다운의 외부를 클릭했을시 드롭다운이 닫히도록 하는 코드이다.

아래에서 clean-up 함수 부분은 드롭다운이 제거될 때 발생하도록 하는 코드이다.