React Component Lifecycle Methods: 주니어 개발자를 위한 이해하기 쉬운 가이드 🔄

React는 웹 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 그리고 React 컴포넌트의 생명주기 메서드는 앱의 성능을 최적화하고, 코드를 더 잘 이해하며 관리하는 데 중요한 역할을 합니다. 이 가이드에서는 주니어 개발자도 쉽게 이해할 수 있도록 React 컴포넌트 생명주기 메서드의 기본을 설명하겠습니다.

컴포넌트 생명주기 이해하기

React 컴포넌트의 생명주기는 크게 세 부분으로 나눌 수 있습니다: 마운팅(Mounting), 업데이팅(Updating), 언마운팅(Unmounting).

마운팅(Mounting)

마운팅은 컴포넌트가 DOM에 처음 삽입되는 과정입니다. 이 단계에서는 주로 초기 설정을 합니다.

• constructor(): 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정할 수 있습니다.
• render(): 컴포넌트의 UI를 렌더링하는 메서드입니다.
• componentDidMount(): 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. 여기서 데이터 로딩 같은 작업을 수행할 수 있습니다.

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    fetchData().then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

업데이팅(Updating)

컴포넌트의 상태(state)나 속성(props)이 변경될 때 업데이트 과정이 시작됩니다.

• shouldComponentUpdate(): 컴포넌트가 업데이트 되어야 할지 결정합니다. 성능 최적화에 유용합니다.
• render(): 컴포넌트를 다시 렌더링합니다.
• componentDidUpdate(): 컴포넌트의 업데이트가 끝난 후 호출됩니다. 여기서 후속 작업을 수행할 수 있습니다.

componentDidUpdate(prevProps, prevState) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

언마운팅(Unmounting)

언마운팅은 컴포넌트가 DOM에서 제거되는 과정입니다.

• componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출됩니다. 여기서 필요한 정리 작업을 수행할 수 있습니다.

componentWillUnmount() {
  clearInterval(this.interval);
}

요약

React 컴포넌트의 생명주기 메서드는 컴포넌트가 생성되고, 업데이트되며, 제거되는 과정을 관리합니다. 이러한 메서드를 이해하고 올바르게 사용하는 것은 효율적인 React 애플리케이션을 개발하는 데 중요합니다. 위의 예제와 설명을 통해 기본적인 생명주기 메서드를 이해하고, 이를 자신의 프로젝트에 적용해 보세요.