[react] 생명주기 메서드를 사용하여 특정 이벤트에 대한 처리를 하려면 어떻게 해야 하나요?

22 Dec 2023

react

먼저, componentDidMount 메서드를 사용하여 컴포넌트가 처음으로 렌더링된 후에 실행되는 코드를 작성합니다. 이 메서드 안에서 이벤트 리스너를 추가하고 특정 이벤트가 발생했을 때 원하는 동작을 수행할 수 있습니다.

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

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    // 스크롤 이벤트가 발생했을 때 실행할 동작을 작성합니다.
    // 예: 스크롤 위치에 따라 특정 기능을 변경하거나 업데이트합니다.
  }

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

export default MyComponent;

위의 예제 코드에서는 componentDidMount 메서드 내에서 scroll 이벤트를 수신하는 이벤트 리스너를 추가하고, 해당 이벤트가 발생했을 때 handleScroll 메서드를 호출하여 스크롤 이벤트에 대한 처리를 수행하고 있습니다.

또한, componentWillUnmount 메서드를 사용하여 컴포넌트가 제거될 때 이벤트 리스너를 정리할 수 있습니다.

참고 자료: React 공식 문서 - 생명주기 메서드