들어가기 앞서

🤦‍♀️ 글쓴이는 언마운트(componentWillUnmount)의 중요성을 간과한 경험을 통해 글을 작성하였다...

useEffect

• useEffect는 함수형 프로그래밍 Hook중 하나이다.
• 클래스형 프로그래밍의 componentDidMount componentDidUpdate componentWillUnmount의 기능을 합쳐놨다고 생각하면된다.
• 레이아웃 배치와 그리기를 완료 후 발생한다.
• 대부분 잘 알고있는것 처럼 두 번째 파라미터([dep])의 값이 변경되면 컴포넌트는 리렌더링 된다.

이 글은 useEffect의 useEffect 공식문서를 읽은 후 보길 추천한다.

---

clean-up 함수를 사용하는 경우

• 예를 들어, 웹소켓을 사용하여 데이터를 구독(subscription)하는 화면이 있다.
• 이 화면을 나갈 때 clena-up (componentWillUnmount)을 하지 않았다고 생각해 보자.

다른 화면으로 이동할 때(언마운트) 구독 해지를 하지 않았으므로 계속해서 데이터를 읽으며 메모리 누수가 발생한다.

👉 clean-up 함수?

useEffect에서 함수를 반환 할 수 있는데 이를 clean-up함수라고 부른다.

• 컴포넌트가 언마운트될 때 clean-up 함수를 작성하는 법은 아래와 같다.

case 1) 두 번째 파라미터에 빈 배열

useEffect(() => {
    return () => {
     	// 구독 해지 로직 작성
    };
  }, []);

• 언마운트시 함수 실행.

case 2) 두 번째 파라미터에 값이 존재

useEffect(() => {
    return () => {
 	  // 구독 해지 로직 작성
    };
  }, [id]);

• 컴포넌트가 처음 마운트 될 때
• 값이 변경될 때
• 언마운트 될 때
• 값이 바뀌기 직전

---

마치며

useEffect를 처음 사용할 때 clean-up함수를 놓치기 쉽다. 글쓴이처럼,,, 🤦‍♀️

useEffect는 함수형 프로그래밍에서 매우 중요한 기능을 가진 Hook중 하나이다.

기본 기능뿐 아니라 clean-up함수의 중요성을 모두 알길 바라며 글을 마친다.