React 앱에서 TypeScript를 사용하여 JSX로 작성된 컴포넌트는 화면에서 보여지는 동안에 렌더링 및 상태 변경 작업을 수행합니다. 그러나 때때로 컴포넌트가 화면에서 사라지는 시점에 작업을 수행해야 하는 경우가 있습니다. 이를 위해 React에서 제공하는 componentWillUnmount와 같은 수명주기 메소드와 유사한 방법을 TypeScript JSX에서 어떻게 활용할 수 있는지 알아보겠습니다.

1. useEffect 훅 활용

useEffect 훅은 함수 컴포넌트에서 부작용(예: 데이터 가져오기, 구독 설정, 수동으로 직접적으로 수정하는 DOM 조작 등)을 수행할 수 있도록 해줍니다. 이를 사용하여 컴포넌트가 마운트 해제되는 시점에 작업을 수행할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

import React, { useEffect } from 'react';

const MyComponent: React.FC = () => {
  useEffect(() => {
    return () => {
      // 컴포넌트가 언마운트 될 때 실행되는 코드
      console.log('컴포넌트가 언마운트 됩니다.');
      // 여기에 정리(clean-up) 작업을 수행할 수 있습니다.
    };
  }, []);

  return <div>내 컴포넌트</div>;
};

export default MyComponent;

위 예제에서 useEffect 훅은 빈 배열을 두 번째 매개변수로 전달하여 컴포넌트가 마운트 해제될 때만 한 번 실행되도록 합니다. 또한 반환된 함수는 마운트 해제될 때 실행됩니다.

2. 클래스 컴포넌트에서의 활용

클래스 컴포넌트에서는 componentWillUnmount 메소드를 사용하여 컴포넌트가 언마운트될 때 작업을 수행할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 컴포넌트가 언마운트 될 때 실행되는 코드
    console.log('컴포넌트가 언마운트 됩니다.');
    // 여기에 정리(clean-up) 작업을 수행할 수 있습니다.
  }

  render() {
    return <div>내 컴포넌트</div>;
  }
}

export default MyComponent;

결론

React에서 TypeScript JSX를 사용하는 경우, useEffect 훅을 통해 컴포넌트가 언마운트 될 때 실행되는 코드를 작성할 수 있습니다. 또한 클래스 컴포넌트에서는 componentWillUnmount 메소드를 활용하여 같은 작업을 수행할 수 있습니다. 화면에서 사라지는 시점에 작업을 수행해야 하는 경우, 이러한 방법을 사용하여 코드를 작성할 수 있습니다.

참고 자료: React 공식 문서 - 클래스 컴포넌트의 라이프사이클 메소드