useEffect cleanup ?

오늘은 리액트 대표적인 훅인 useEffect에 대해서 공부하고자 한다.
가장 기본적인 hook이지만 깊게 들어가면 엄청 어려운 내용일거 같다.

React 공식문서의 내용을 토대로 useEffect가 무엇인지 정리해보고자 한다.

https://react.dev/reference/react/useEffect 참고하였음

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

useEffect 첫번째 인자로는 사용하려는 함수로직이 들어갑니다.
해당 컴포넌트가 DOM에 추가되면, React는 첫번째 인자인 콜백함수를 실행합니다.

useEffect 두번째 인자로는 변경된 종속성 값이 들어갑니다.
이 값이 변경될 때마다 useEffect의 첫번째 인자에 들어가는 함수로직이 반복됩니다.

여기서 필요한 경우 클린업 함수를 반환할 수 있습니다.(return문에 적힌 함수)

이 클린업 함수는 컴포넌트가 unMount될때, 즉 DOM에서 제거될 때 실행됩니다.

공식문서에서는 필요한 경우 클린업 함수를 반환할 수 있다 라고 이야기하는데,
그렇다면 둘의 차이점에 대해 알아보겠다.

❗️클린업이 필요한 경우

컴포넌트가 마운트 될 때 이벤트 리스너를 등록한 경우, 해당 이벤트 리스너를 제거하지 않으면 메모리 누수가 발생 할 수 있습니다. 이 경우를 대비하여 클린업 함수를 사용하여 이벤트 리스너를 제거해야 합니다.
( ex) setTimeout, setInterval 등의 web api )

❗️클린업이 필요하지 않은 경우

일회성 작업일 경우, 의존성이 없을 경우, 데이터 변경이 없는 경우에는 클린업 함수가 필요하지 않습니다

프로젝트에서 setTimeout 혹은 setInterval 등의 web API를 사용했을때 무심코 클린업 함수를 사용하지 않았었는데, 이번 기회에 클린업 코드의 중요성을 알게 되었고 이를 바로 적용하였다.