리액트 생명주기 클래스형과 함수형 비교해보기

 

클래스형 컴포넌트 버전

import React, { Component } from "react";

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    console.log("1. Constructor: 컴포넌트 생성");
  }

  componentDidMount() {
    console.log("3. componentDidMount: 컴포넌트가 화면에 마운트됨");
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("4. componentDidUpdate: 컴포넌트가 업데이트됨", prevState, "→", this.state);
  }

  componentWillUnmount() {
    console.log("5. componentWillUnmount: 컴포넌트가 언마운트됨");
  }

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

  render() {
    console.log("2. Render: 컴포넌트 렌더링");
    return (
      <div>
        <h1>클래스형 컴포넌트</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>증가</button>
      </div>
    );
  }
}

export default LifecycleExample;

 

constructor : 초기 state설정과 초기화

componentDidMount : 마운트 이후 한 번 호출

componentDidUpdate : 상태 변경 시 호출

componentWillUnmount : 컴포넌트가 사라지기 전에 호출

 

---

 

함수형 컴포넌트 버전

import React, { useState, useEffect } from "react";

const LifecycleExample = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("1. useEffect (빈 배열): 컴포넌트가 화면에 마운트됨");

    return () => {
      console.log("3. useEffect cleanup: 컴포넌트가 언마운트됨");
    };
  }, []);

  useEffect(() => {
    console.log("2. useEffect (count 의존성): count가 변경됨 →", count);
  }, [count]);

  return (
    <div>
      <h1>함수형 컴포넌트</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

export default LifecycleExample;

 

useEffect:

• 의존성으로 빈 배열 [] 설정: 마운트될 때만 실행. ( componentDidMount )
• 읜존성으로 빈 배열 []설정 이후 언마운트 시 클린업 함수 호출 ( componentWillUnmount )
• 의존성으로 [count]설정 : count가 변경될 때마다 실행 ( componentDidUpdate )