<aside> 💡 React 라이프 사이클에 대해서 알아보자

</aside>

라이프 사이클?

생애 주기 를 얘기하며, 다양한 분야에서 사용되는 개념 생성부터 성장, 쇠퇴하는 일련의 과정을 의미한다.

리액트는 컴포넌트 단위로 개발, 이때 각 컴포넌트들은 라이프 사이클을 가지고 있다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.

클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프 사이클에 따라 컴포넌트를 조작하고

함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작할 수 있도록 구현한다.

클래스형 컴포넌트? 함수형 컴포넌트?

리액트 컴포넌트는 크게 클래스형 컴포넌트, 함수형 컴포넌트로 나뉘게 된다.

클래스형 컴포넌트

자바스크립트 클래스 문법을 사용하며 this.state , this.setState() 메서드를 사용하여 상태를 관리합니다.

또한 componentDidMount, componentDidUpdate, componentWillUnmount 등의 라이프 사이클 메서드를 통해 컴포넌트의 생애 주기를 관리합니다.

예시

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

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

export default MyClassComponent;

함수형 컴포넌트

자바스크립트 함수 문법을 사용하며 useState 훅을 사용하여 상태를 관리합니다.

useEffect 훅을 사용하여 따로 라이프 사이클 메서드를 사용하지않고 생애 주기를 처리할 수 있습니다.

예시