Before getting into Cleanup Function

• State(showing)의 변경에 따른 삼항연산자를 통해 특정한 컴포넌트를 보였다 안 보였다 하는 기능을 구현할 수 있다.

• Hello 컴포넌트에 useEffect 코드를 추가작성하였다.
• 그런데 Hello의 useEffect가 왜 여러 번 실행되는 건지 의문스러울 수 있다. 분명히 컴포넌트가 최초 렌더링 될 때 한 번만 실행된다고 했는데?
• 그런데 App의 삼항연산자를 보면 showing에 따라서 null이거나 Hello 컴포넌트이다. 이 때 컴포넌트를 destroy 하는 것이다.
• 이 코드는 visibility의 문제가 아니라 create와 destroy가 연속적으로 발생하고 있다.
• 그래서 Hello 컴포넌트는 삭제되었다가 새롭게 생성되어서 렌더링 되는 상태이기 때문에 저 useEffect 코드가 버튼 클릭에 따라 반복적으로 실행되는 것은 타당하다.

우리는 지금까지 오직 컴포넌트가 Create 될 때에 대해서만 집중했는데, 이처럼 Destroy 되는 시점에서 무언가를 해야한다면 어떻게 해야하는 걸까?

Cleanup Function

Thus, 리액트 팀에서는, 컴포넌트가 Destroy 될 때도 코드를 실행할 수 있는 기능을 제공한다!

useEffect(() => {
  	// 이 부분에 부수 효과 코드 작성
  	// cleanup 함수를 반환하여 부수 효과 해제 시 정리 작업을 수행
  return () => {
   	 // cleanup 코드 작성
  };
}, [/* 의존성 배열 */]);

• 클린업 함수 구현

• 이렇게 함수를 분리시켜서 작성할 수도 있다.
• useEffect의 첫 번째 인자인 함수가 가진 return 값(역시 함수)이 cleanup function.
• 컴포넌트가 destroy 될 때 실행될 녀석.

우리가 아주 큰 앱을 개발 중이라면, 컴포넌트가 삭제될 때 실행될 Cleanup Function에, 로그를 분석한 내용에 대한 보고를 보내거나 하는 등의 기능을 넣어두거나 할 수 있을 것이다.