생명주기(Lifecycle)

생명주기(Lifecycle)

• 생명주기(Lifecycle)는 특정 개체나 시스템이 존재하는 동안 거치는 여러 단계와 각 단계에서 수행되는 작업들을 말한다.
• 소프트웨어 개발에서는 다양한 컴포넌트나 객체의 생명주기를 정의하여, 각 단계에서 어떤 작업이 수행되는지 명확히 함으로써 관리와 유지보수를 용이하게 한다.

컴포넌트 생명주기

특히 프론트엔드 개발에서, 컴포넌트 생명주기는 중요한 개념이다.

• 대표적으로 React와 같은 라이브러리에서는 컴포넌트가 생성, 업데이트, 소멸되는 과정을 명확히 정의하여, 개발자가 적절한 타이밍에 필요한 작업을 수행할 수 있도록 한다.

React 컴포넌트 생명주기

React에서는 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 다양한 생명주기 메서드를 제공한다.

1. 마운트(Mount): 컴포넌트가 처음 DOM에 삽입될 때 호출되는 메서드이다.
   • 'constructor()': 컴포넌트가 처음 생성될 때 호출된다.
   • 'static getDerivedStateFromProps(props, state)': props와 state로부터 새로운 state를 반환할 때 사용된다.
   • 'render()': 컴포넌트의 JSX를 반환한다.
   • 'componentDidMount()`: 컴포넌트가 DOM에 삽입된 직후에 호출된다. 이곳에서 네트워크 요청 등을 수행할 수 있다.
2. 업데이트(Update): 컴포넌트의 state나 props가 변경될 때 호출되는 메서드이다.
   • 'static getDerivedStateFromProps(props, state)': props와 state로부터 새로운 state를 반환할 때 사용된다.
   • 'shouldComponentUpdate(nextPRops, nextState)`: 컴포넌트가 업데이트될지 여부를 결정한다.
   • 'render()': 컴포넌트의 JSX를 반환한다.
   • 'getSnapshotBeforeUpdate(prevProps, prevState)': 업데이트 직전에 DOM에서 정보를 가져오거나 변경하기 위해 사용된다.
   • 'componentDidUpdate(prevProps, prevState, snapshot)': 컴포넌트가 업데이트된 후 호출된다.
3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거될 때 호출되는 메서드이다.
   • 'componentWillUnmount()': 컴포넌트가 DOM에서 제거되기 직전에 호출된다. 이곳에서 타이머를 정리하거나 네트워크 요청을 취소할 수 있다.

예제: 카운터 컴포넌트

다음은 카운터 컴포넌트를 통해 생명주기 메서드들이 언제 호출되는지 확인할 수 있는 간단한 예제이다.

 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    console.log('Constructor: 컴포넌트가 생성되었습니다.');
  }

  componentDidMount() {
    console.log('componentDidMount: 컴포넌트가 DOM에 삽입되었습니다.');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate: 컴포넌트가 업데이트되었습니다.');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount: 컴포넌트가 DOM에서 제거되었습니다.');
  }

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

  render() {
    console.log('Render: 컴포넌트가 렌더링됩니다.');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

 

예제 설명: 카운터 컴포넌트

1. constructor(props)
   
   • 컴포넌트가 처음 생성될 때 호출된다.
   • 초기 상태(state)를 설정한다.
   • 예제에서 'count'의 초기 값을 0으로 설정한다.
2. componentDidMount()
   • 컴포넌트가 처음 DOM에 삽입된 직후에 호출된다.
   • 이 시점에서 네트워크 요청 등을 수행할 수 있다.
3. componentDidUpdate(prevProps, prevState)
   • 컴포넌트가 업데이트된 후에 호출된다.
   • 이전의 props와 state에 접근할 수 있다.
4. componentWillUnmount()
   • 컴포넌트가 DOM에서 제거되기 직전에 호출된다.
   • 정리 작업(cleanup)을 수행할 수 있다.

실행 과정: 카운터 컴포넌트

1. 컴포넌트가 처음 생성될 때 'constructor'가 호출되고 초기 상태가 설정된다.
2. 컴포넌트가 DOM에 삽입되면 'componentDidMount'가 호출된다.
3. 버튼을 클릭하여 상태를 업데이트하면 'render'와 'componentDidUpdate'가 호출된다.
4. 컴포넌트가 DOM에서 제거되면 'componentWillUnmount'가 호출된다.

요약

• 생명주기(Lifecycle)는 객체나 시스템이 존재하는 동안 거치는 단계와 각 단계에서 수행되는 작업을 말한다.
• React 컴포넌트 생명주기는 컴포넌트가 생성, 업데이트, 소멸되는 과정을 정의하며, 각 단계에서 호출되는 메서드들을 제공한다.
• 생명주기 메서드를 통해 특정 시점에 원하는 작업을 수행할 수 있어, 컴포넌트의 상태 관리와 DOM 조작을 효율적으로 할 수 있다.