ReactJS — 구성 요소 수명 주기 메서드

React 구성 요소에는 생성된 시점부터 소멸될 때까지 거치는 이벤트의 수명 주기가 있습니다. 이러한 수명 주기 이벤트를 통해 개발자는 다양한 지점에서 구성 요소의 수명 주기에 연결하고 특정 작업을 수행할 수 있습니다.

다음은 React 구성 요소의 주요 수명 주기 메서드와 각각에 대한 간략한 설명 및 사용 방법에 대한 예입니다.

constructor(): 이 메서드는 구성 요소가 마운트(DOM에 삽입)되기 전에 호출됩니다. 상태를 초기화하고 이벤트 핸들러를 바인딩하는 데 사용됩니다.

예:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

예:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

예:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

예:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

예:

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

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

다음은 주요 React 구성 요소 수명 주기 메서드에 대한 요약입니다.

• constructor(): 상태를 초기화하고 이벤트 핸들러를 바인딩합니다. 컴포넌트가 마운트되기 전에 호출됩니다.
• componentDidMount(): 구성 요소가 렌더링되면 작업 또는 API 호출을 트리거합니다. 구성 요소가 마운트된 후 호출됩니다.
• shouldComponentUpdate(): 구성 요소를 업데이트해야 하는지 여부를 나타내는 부울을 반환합니다. 구성 요소가 다시 렌더링되기 전에 호출됩니다.
• componentDidUpdate(): 구성 요소가 업데이트된 후 작업 또는 API 호출을 트리거합니다. 구성 요소가 업데이트된 후 호출됩니다.
• componentWillUnmount(): 리소스 또는 이벤트 리스너를 정리합니다. 구성 요소가 소멸되기 직전에 호출됩니다.
• render(): 컴포넌트의 JSX를 렌더링합니다. 구성 요소를 다시 렌더링해야 할 때마다 호출됩니다.