🌀 라이프 사이클?

<aside> 💡

React의 컴포넌트는 생명 주기, 즉 라이프 사이클을 가진다!

</aside>

• 생명 주기란 컴포넌트가 생성되고 사용되고 마지막으로 소멸될 때까지 일련의 과정을 말한다. 크게 **Mounting(생성), Update(사용), UnMounting(소멸)**의 세 가지 주요 단계로 나눌 수 있다.
• 생명 주기 안에서는 특정 시점에 자동으로 호출되어 특정 작업을 수행할 수 있게 하는 메서드가 있는데 이를 라이프 사이클 메서드라고 한다!
  • 라이프 사이클 메서드는 컴포넌트가 수행한 작업이나 앞으로 수행할 작업에 따라 특정 시점에 실행되기에 어떤 메서드는 한 번만 실행 되기도 하고, 어떤 메서드는 계속 해서 실행되는 경우도 있다.

🔧 라이프 사이클 메서드

클래스형 컴포넌트의 라이프 사이클 메서드는 아래의 그림과 같이 9가지로 분류되며 크게 React 생명 주기의 세 단계로 나눌 수 있다!

1️⃣ Mounting- 생성

마운팅 단계는 컴포넌트가 생성되는 단계이며 이 단계의 메서드들은 한 번만 실행된다.

이때, 최초로 컴포넌트가 DOM에 삽입되며 애플리케이션에서 컴포넌트가 시작 된다.

이 과정에서 몇 가지 핵심적인 라이프 사이클 메서드가 호출되며 각각의 메서드는 컴포넌트 초기화와 설정에 필수적인 역할을 한다.

• constructor(props)

  이 메서드는 컴포넌트의 생성자 함수로, 컴포넌트가 생성될 때 가장 먼저 실행 된다. 이 메서드는 컴포넌트의 초기 상태를 설정하거나 이벤트 핸들러를 바인딩(이벤트 핸들러 함수에 this를 명시적으로 연결하는 )하는 데 주로 사용된다.

  1. 초기 상태 설정

  this.state라는 객체를 설정해서 컴포넌트의 초기 상태를 정의할 수 있다. 상태란 컴포넌트 내에서 관리되는 데이터이므로 이를 기반으로 컴포넌트가 어떤 내용을 화면에 보여줄지를 결정할 수 있다.

  2. 이벤트 핸들러 바인딩

  이벤트 핸들러는 버튼 클릭 같은 특정 사용자 동작을 처리하는 함수들인데, 이 함수 안에서 this가 현재 컴포넌트를 가리키게 하려면 constructor에서 이 함수를 this와 묶어줘야 한다. 이를 "바인딩"이라고 부른다.

  3. super(props)의 역할

  super(props)는 부모 클래스(React.Component)의 생성자를 호출하는 코드이다. 이걸 호출하지 않으면 this.props에 접근할 수 없기 때문에 props를 사용하는 컴포넌트에서는 꼭 super(props)를 호출해야 한다.

  → super는 부모 클래스의 메서드나 속성을 상속받아 사용할 수 있게 해주는 역할을 하는데, React 클래스형 컴포넌트에서는 부모인 React.Component로부터 필요한 기능을 가져오도록 해야 컴포넌트가 제대로 동작한다.

  class MyComponent extends React.Component {
    constructor(props) {
      // 부모 클래스의 생성자 호출 (필수)
      super(props);
      this.state = {
        count: 0
      };
    }
  
    render() {
      return <div>{this.props.name}</div>;
    }
  }