리액트 생명주기(life cycle)

 

 

리액트 생명주기(Life Cycle)는 리액트 컴포넌트가 생성되고, 업데이트되며, 삭제되는 일련의 과정을 의미합니다.

이 생명주기는 크게 세 가지 단계로 나눌 수 있습니다: 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting).

각 단계에는 특정 메서드가 실행되며, 이를 통해 개발자는 컴포넌트의 다양한 시점에 특정 작업을 수행할 수 있습니다.

1. 마운트(Mounting)

 

마운트 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생합니다. 이 과정에서 호출되는 주요 메서드는 다음과 같습니다:

• constructor(): 컴포넌트가 처음 생성될 때 호출됩니다. 주로 초기 상태(state) 설정 및 인스턴스 변수 초기화에 사용됩니다.
• static getDerivedStateFromProps(): props로부터 state를 파생할 때 호출됩니다. 이 메서드는 컴포넌트가 마운트 되기 전과 업데이트될 때 모두 호출됩니다.
• render(): 컴포넌트의 UI를 렌더링합니다. JSX를 반환하며, 이 메서드는 순수 함수여야 하므로 side-effect를 일으키지 않아야 합니다.
• componentDidMount(): 컴포넌트가 마운트 된 후 호출됩니다. 이 메서드에서는 DOM 노드가 존재하기 때문에, DOM 조작이나 네트워크 요청 등의 작업을 수행할 수 있습니다.

 

2. 업데이트(Updating)

 

업데이트 단계는 컴포넌트의 props 또는 state가 변경될 때 발생합니다. 이 과정에서 호출되는 주요 메서드는 다음과 같습니다:

• static getDerivedStateFromProps(): 마운트 단계에서도 호출되며, 업데이트될 때도 호출됩니다. props로부터 state를 갱신할 필요가 있을 때 사용됩니다.
• shouldComponentUpdate(): 리렌더링을 할지 말지를 결정합니다. 기본적으로 true를 반환하며, 이를 커스터마이즈 하여 성능 최적화를 할 수 있습니다.
• render(): 컴포넌트를 다시 렌더링합니다.
• getSnapshotBeforeUpdate(): DOM이 실제로 업데이트되기 직전에 호출됩니다. 이 메서드는 업데이트 전의 DOM 상태를 캡처하여 이후에 사용할 수 있습니다.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출됩니다. 이전 props와 state에 접근할 수 있으며, 주로 업데이트 후의 작업을 수행하는 데 사용됩니다.

 

3. 언마운트(Unmounting)

 

언마운트 단계는 컴포넌트가 DOM에서 제거될 때 발생합니다. 이 과정에서 호출되는 주요 메서드는 다음과 같습니다:

 

• componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출됩니다. 이 메서드에서는 타이머 제거, 네트워크 요청 취소, 구독 해제 등 정리(clean-up) 작업을 수행할 수 있습니다.

 

4. 기타

• componentDidCatch(error, info): 자식 컴포넌트에서 발생한 에러를 처리할 수 있습니다. 에러 경계를 구현할 때 사용됩니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('Constructor');
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps');
    return null;  // 반환된 값이 새로운 state가 됩니다. null을 반환하면 state를 변경하지 않습니다.
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;  // false를 반환하면 업데이트를 하지 않습니다.
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;  // 반환된 값이 componentDidUpdate의 세 번째 인자로 전달됩니다.
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default MyComponent;

 

이 예제에서 각 생명주기 메서드는 컴포넌트의 생명주기 단계에서 언제 호출되는지 콘솔에 로그를 출력합니다. 이를 통해 생명주기 메서드의 호출 순서를 명확하게 이해할 수 있습니다.

 

요약

 

리액트 컴포넌트 생명주기는 크게 세 단계로 나눌 수 있습니다: 마운트, 업데이트, 언마운트

 

마운트는 컴포넌트가 DOM에 처음 삽입될 때 호출되는 메서드

• constructor(): 컴포넌트 초기화.
• static getDerivedStateFromProps(): props로부터 state 갱신.
• render(): JSX 반환.
• componentDidMount(): 컴포넌트가 마운트 된 후 호출.

업데이트는 props 또는 state가 변경될 때 호출되는 메서드

• static getDerivedStateFromProps(): props로부터 state 갱신.
• shouldComponentUpdate(): 리렌더링 여부 결정.
• render(): JSX 반환.
• getSnapshotBeforeUpdate(): 업데이트 전 DOM 상태 캡처.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출.

언마운트는 컴포넌트가 DOM에서 제거될 때 호출되는 메서드

• componentWillUnmount(): 컴포넌트가 언마운트되기 전 정리 작업 수행.