컴포넌트 라이프 사이클 이해하기: 클래스 컴포넌트의 라이프사이클 메소드와 그 사용 시기

React에서는 컴포넌트의 생명주기(lifecycle)를 관리하기 위해 여러 가지 라이프사이클 메소드를 제공합니다. 클래스 컴포넌트에서 이 메소드들을 활용하면 컴포넌트가 생성되고 업데이트 되며 소멸되는 모든 단계를 관리할 수 있습니다. 이번 글에서는 클래스 컴포넌트의 라이프사이클 메소드와 그 사용 시기에 대해 자세히 알아보겠습니다.

마운팅(Mounting) 단계

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

constructor

생성자는 컴포넌트가 처음 생성될 때 호출됩니다. 이곳에서는 주로 컴포넌트의 초기 상태를 설정하거나, 메소드 바인딩을 수행합니다. props와 state를 사용해 초기 설정을 할 수 있습니다.

javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

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

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

static getDerivedStateFromProps

이 메소드는 컴포넌트가 새로운 props를 받았을 때 호출되며, props와 state를 기반으로 새 state를 반환합니다. 주로 컴포넌트의 state와 props가 동기화될 필요가 있을 때 사용합니다.

javascript
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someValue !== prevState.someValue) {
    return { someValue: nextProps.someValue };
  }
  return null;
}

render

render 메소드는 컴포넌트가 화면에 출력될 JSX를 반환합니다. 이 메소드는 순수 함수처럼 동작하며, 부작용을 가질 수 없습니다. 상태나 props가 변경될 때마다 호출됩니다.

javascript
render() {
  return (
    <div>{this.props.content}</div>
  );
}

componentDidMount

이 메소드는 컴포넌트가 처음으로 화면에 렌더링된 직후에 호출됩니다. 여기에서는 주로 비동기 작업을 수행하거나, DOM 요소에 직접 접근하는 작업을 수행할 수 있습니다.

javascript
componentDidMount() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
}

업데이트(Updating) 단계

업데이트 단계는 컴포넌트가 새로운 props를 받거나 setState로 상태가 변경될 때 발생합니다. 이 과정에서 호출되는 주요 메소드는 다음과 같습니다:

shouldComponentUpdate

이 메소드는 컴포넌트가 다시 렌더링될 지 여부를 결정합니다. 기본값은 true이며, 성능 최적화가 필요할 때는 false를 반환하도록 수정할 수 있습니다.

javascript
shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.value !== this.props.value) {
    return true;
  }
  return false;
}

getSnapshotBeforeUpdate

이 메소드는 DOM이 실제로 업데이트되기 직전에 호출됩니다. 메소드의 반환값은 componentDidUpdate에서 세 번째 인자로 전달됩니다.

javascript
getSnapshotBeforeUpdate(prevProps, prevState) {
  if (prevProps.scrollPosition !== this.props.scrollPosition) {
    return { scrollTop: this.divRef.scrollTop };
  }
  return null;
}

componentDidUpdate

이 메소드는 컴포넌트가 업데이트된 후에 호출됩니다. 여기에서는 주로 이전의 props와 state를 비교하거나, 업데이트 결과로 인해 추가 작업을 수행할 수 있습니다.

javascript
componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    this.divRef.scrollTop = snapshot.scrollTop;
  }
}

언마운팅(Unmounting) 단계

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

componentWillUnmount

이 메소드는 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 여기에서는 주로 타이머를 해제하거나, 네트워크 요청을 취소하는 등 정리 작업을 수행합니다.

javascript
componentWillUnmount() {
  clearTimeout(this.timerID);
}

오류 처리(Error Handling) 단계

오류 처리 단계는 컴포넌트 렌더링 도중 오류가 발생했을 때 호출됩니다. 이 과정에서 호출되는 주요 메소드는 다음과 같습니다:

componentDidCatch

이 메소드는 컴포넌트 렌더링 도중에 오류가 발생했을 때 호출됩니다. 여기에서는 주로 오류 정보를 로깅하거나, 사용자에게 오류 메시지를 표시하는 작업을 수행합니다.

javascript
componentDidCatch(error, info) {
  console.error('Error occurred:', error, info);
}

이와 같이 React 클래스 컴포넌트의 라이프사이클 메소드는 각 단계별로 다르게 호출되며, 이를 통해 컴포넌트의 생명주기 동안 필요한 다양한 작업을 효과적으로 처리할 수 있습니다. 각 메소드의 역할과 언제 사용하는지 이해함으로써, 컴포넌트를 보다 효율적으로 관리하고 최적화할 수 있습니다.