1. 함수형 컴포넌트

• 함수형 컴포넌트는 단순히 함수로 정의됩니다. 리액트 16.8에서 Hooks가 도입되면서 함수형 컴포넌트에서도 상태와 생명주기 메서드를 사용

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 컴포넌트가 마운트된 후 호출됨
    console.log('Component did mount');
  }, []);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};
export default MyComponent;

2. 클래스형 컴포넌트

• 리액트 16.8 이전에는 상태(state)와 생명주기 메서드(lifecycle methods)를 사용하기 위해 주로 클래스형 컴포넌트를 사용했음

import React, { Component } from 'react';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  componentDidMount() {
    // 컴포넌트가 마운트된 후 호출됨
    console.log('Component did mount');
  }
  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 MyComponent;

3. 두 컴포넌트의 차이점

• useState
  • 클래스형 컴포넌트 : this.state와 this.setState를 사용하여 상태를 관리함
  • 함수형 컴포넌트 : useState를 사용하여 상태를 관리함
• 생명주기
  • 클래스형 컴포넌트 : componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 사용함
  • 함수형 컴포넌트 : useEffect를 사용하여 생명주기 메서드와 비슷한 기능을 구현함
• Hook
  • 클래스형 컴포넌트 : Hooks를 사용못함
  • 함수형 컴포넌트 : Hooks를 사용하여 사이드 이펙트를 처리할수있음
• 생명주기
  • 클래스형 컴포넌트 : 마운트, 업데이트, 언마운트 등 클래스형 컴포넌트와 함수형 컴포넌트 모두 생명주기를 관리할 수 있음
  • 함수형 컴포넌트 : 함수형 컴포넌트는 useEffect, useLayoutEffect 등의 Hook을 사용하여 생명주기를 관리함