[react] 생명주기 메서드를 사용하여 윈도우 이벤트에 대응하는 방법은 무엇인가요?

22 Dec 2023

react

먼저, 이벤트 리스너를 추가해야 하는 컴포넌트의 componentDidMount 메서드에서 window.addEventListener를 사용하여 이벤트를 등록합니다. 그리고 해당 이벤트가 발생했을 때 처리할 로직을 담은 함수를 전달합니다.

다음으로, 컴포넌트가 언마운트될 때 이벤트 리스너를 제거하기 위해 componentWillUnmount 메서드에서 window.removeEventListener를 사용하여 이벤트를 제거합니다.

아래는 간단한 예시 코드입니다.

class WindowEventHandler extends React.Component {
  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  handleResize() {
    // 윈도우 리사이즈 이벤트에 대한 로직을 작성합니다.
  }

  render() {
    return <div>Window Event Handler</div>;
  }
}

이렇게 하면 해당 컴포넌트가 마운트될 때 윈도우 리사이즈 이벤트를 감지하고, 언마운트될 때 이벤트 리스너를 제거할 수 있게 됩니다.