[react] 리액트 생명주기 메서드를 활용한 실제 예시는 어떤 것이 있나요?

이러한 경우에는 생명주기 메서드(lifecycle methods)를 사용하여 원하는 동작을 정의할 수 있습니다. 여러 가지 생명주기 메서드가 있지만, 가장 대표적으로 사용되는 메서드들을 몇 가지 소개해 드리겠습니다.

1. componentDidMount()

이 메서드는 컴포넌트가 화면에 렌더링된 후에 호출됩니다. 이 때 서버에서 데이터를 가져오거나 외부 라이브러리를 초기화하는 등의 작업을 할 수 있습니다.

class MyComponent extends React.Component {
  componentDidMount() {
    // 화면에 렌더링된 후에 실행될 작업들을 여기에 작성합니다.
  }
  
  render() {
    // ...
  }
}

2. componentWillUnmount()

이 메서드는 컴포넌트가 화면에서 제거되기 전에 호출됩니다. 이 때 리소스를 해제하거나 정리 작업을 할 수 있습니다.

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 화면에서 제거되기 전에 실행될 작업들을 여기에 작성합니다.
  }

  render() {
    // ...
  }
}

3. componentDidUpdate()

이 메서드는 컴포넌트의 업데이트가 끝난 후에 호출됩니다. 이 때 이전의 상태와 현재의 상태를 비교하여 필요한 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // 컴포넌트의 업데이트가 끝난 후에 실행될 작업들을 여기에 작성합니다.
  }

  render() {
    // ...
  }
}

이러한 생명주기 메서드를 활용하여 컴포넌트의 동작과 상태 변화를 관리할 수 있습니다. 더 많은 생명주기 메서드와 활용 예시는 공식 React 문서에서 확인할 수 있습니다.