React에서 컴포넌트 라이프 사이클 이해 및 관리

React에서 컴포넌트 라이프 사이클 이해 및 관리

React에서 컴포넌트 라이프 사이클은 컴포넌트가 마운트되고, 업데이트되고, 마운트 해제되는 과정을 의미합니다. 컴포넌트 라이프 사이클은 주로 클래스 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 Hooks를 사용하여 라이프 사이클을 관리합니다. 이 글에서는 클래스 컴포넌트의 라이프 사이클에 초점을 맞춰 설명합니다.

1. 컴포넌트 라이프 사이클 메서드

React에서는 컴포넌트의 라이프 사이클을 관리하기 위한 몇 가지 메서드를 제공합니다. 각 메서드는 컴포넌트의 특정 시점에 자동으로 호출됩니다.

1.1 마운트

마운트는 컴포넌트가 DOM에 처음 생성되고 삽입되는 과정을 의미합니다. 마운트 과정에서 호출되는 메서드는 다음과 같습니다.

• constructor(): 컴포넌트의 생성자 메서드로, 컴포넌트 인스턴스가 생성될 때 한 번만 호출됩니다. 초기 상태 설정 등을 수행할 수 있습니다.
• static getDerivedStateFromProps(): 컴포넌트가 마운트되거나 업데이트될 때 호출되며, 상태를 변경할 필요가 있는지 확인하고 필요하다면 새로운 상태를 반환합니다.
• render(): 컴포넌트가 화면에 표시되기 위해 호출되는 메서드로, JSX를 반환합니다.
• componentDidMount(): 컴포넌트가 마운트된 후 호출되는 메서드로, 주로 비동기 작업이나 외부 라이브러리를 사용할 때 활용됩니다.

1.2 업데이트

업데이트는 컴포넌트가 변경되어 다시 렌더링되는 과정을 의미합니다. 업데이트 과정에서 호출되는 메서드는 다음과 같습니다.

• static getDerivedStateFromProps(): 마운트 때와 동일하게 호출되며, 상태를 변경할 필요가 있는지 확인하고 필요하다면 새로운 상태를 반환합니다.
• shouldComponentUpdate(): 컴포넌트가 업데이트되기 전에 호출되며, 렌더링 여부를 결정합니다. 성능 최적화를 위해 사용됩니다.
• render(): 마운트 때와 동일하게 호출되어 컴포넌트를 다시 렌더링합니다.
• getSnapshotBeforeUpdate(): 컴포넌트의 업데이트 직전에 호출되며, 이전의 DOM 상태를 저장하고 싶을 때 사용합니다. 반환한 값은 componentDidUpdate()의 세 번째 인자로 전달됩니다.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출되는 메서드로, 주로 업데이트에 따른 추가 작업이 필요한 경우에 사용됩니다.

1.3 마운트 해제

마운트 해제는 컴포넌트가 DOM에서 제거되는 과정을 의미합니다. 마운트 해제 과정에서 호출되는 메서드는 다음과 같습니다.

• componentWillUnmount(): 컴포넌트가 마운트 해제되기 전에 호출되는 메서드로, 컴포넌트와 관련된 리소스를 정리하거나 타이머를 제거하는 등의 작업을 수행할 수 있습니다.

2. 라이프 사이클 메서드 사용 예시

2.1 컴포넌트가 마운트될 때 데이터 가져오기

컴포넌트가 처음 마운트될 때 API 호출을 통해 데이터를 가져와야 하는 경우, componentDidMount() 메서드를 사용하여 비동기 작업을 수행할 수 있습니다.

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => this.setState({ data }));
  }

  // ...
}

2.2 컴포넌트 업데이트 최적화

컴포넌트의 업데이트를 제어하여 렌더링 성능을 최적화하려면 shouldComponentUpdate() 메서드를 사용합니다. 이 메서드에서는 true 또는 false를 반환하여 업데이트를 진행할지 결정할 수 있습니다.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.value !== this.props.value;
  }

  // ...
}

이 글에서는 클래스 컴포넌트 기반의 라이프 사이클에 대해 설명했습니다. 함수형 컴포넌트에서는 Hooks를 사용하여 라이프 사이클을 관리할 수 있으며, 이에 대한 내용은 별도의 글에서 다루겠습니다.
​
​