React lifecycle

소개

React에서는 컴포넌트(component)라는 개념을 사용하여 UI를 작성한다. 컴포넌트는 생명주기(lifecycle)를 가지며, 이를 이해하면 React 애플리케이션을 개발하는 데 매우 중요한 지식이 됩니다. 이번 글에서는 React 컴포넌트의 생명주기에 대해 알아보고, 예제와 함께 살펴보겠다.

컴포넌트 생명주기

React 컴포넌트는 생성, 갱신, 제거의 세 가지 생명주기를 갖는다. 각각의 생명주기는 다양한 단계를 거치며, 해당 단계에서 수행될 작업들을 정의할 수 있다. 예를 들어, 컴포넌트가 생성될 때 데이터를 초기화하거나, 갱신될 때 애니메이션을 실행할 수 있다.

1. 생성

컴포넌트가 생성될 때, 다음과 같은 단계를 거친다.

• constructor: 컴포넌트 생성 시 호출되는 메서드. 초기화 작업을 수행.
• getDerivedStateFromProps: props로부터 상태(state)를 도출하는 메서드.
• render: 가상 DOM(virtual DOM)을 생성.
• componentDidMount: 컴포넌트가 마운트된 후(즉, DOM에 삽입된 후) 호출. 네트워크 요청 등의 작업을 수행할 수 있다.

2. 갱신

컴포넌트가 갱신될 때, 다음과 같은 단계를 거친다.

• getDerivedStateFromProps: 생성 단계와 동일.
• shouldComponentUpdate: 컴포넌트가 갱신돼야 할 지 여부를 결정.
• render: 생성 단계와 동일.
• getSnapshotBeforeUpdate: 변경 전 스냅샷을 생성.
• componentDidUpdate: 컴포넌트가 갱신된 후 호출. 네트워크 요청 등의 작업을 수행할 수 있다.

3. 제거

컴포넌트가 제거될 때, 다음과 같은 단계를 거친다.

• componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출. 이벤트 리스너 등을 해제하는 작업을 수행.

예제

다음은 생명주기 메서드 중 일부를 사용한 예제. 이 컴포넌트는 버튼을 누르면 상태(state)가 변경되고, shouldComponentUpdate 메서드에서 현재 상태와 변경될 상태를 비교하여 불필요한 갱신을 방지한다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

결론

React 컴포넌트의 생명주기는 컴포넌트가 생성, 갱신, 제거될 때 수행되는 작업을 정의하는 메서드의 집합이다. 이를 이해하면, 컴포넌트의 상태 관리와 UI 업데이트 방식을 더욱 효율적으로 설계할 수 있다.

참고

https://ko.reactjs.org/docs/state-and-lifecycle.html