[React/JSX] 클래스 컴포넌트 vs 함수형 컴포넌트

Class Component vs Functional Component (React JSX)

 

React에서는 컴포넌트를 만들 때 두 가지 방식이 있다:

• Class Component (클래스 컴포넌트)
• Functional Component (함수형 컴포넌트)

 

---

🎯 1. Class Component (클래스 컴포넌트)

 

클래스를 사용해 컴포넌트를 정의하는 방식 (ES6 Class 문법 활용)
state와 라이프사이클 메서드를 사용할 수 있음.

 

 

예제:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }; // state 사용
  }

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

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

export default Counter;

 

✔️ class 키워드를 사용하여 정의

✔️ this.state를 사용하여 상태(state) 관리

✔️ this.setState()를 사용하여 state 업데이트

✔️ render() 메서드가 반드시 필요

 

---

🎯 2. Functional Component (함수형 컴포넌트)

 

ES6 함수로 컴포넌트를 정의하는 방식
React 16.8 이후부터 useState, useEffect 등의 Hook을 사용할 수 있음.

 

예제

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // useState로 상태 관리

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

 

✔️ function 키워드로 정의

✔️ useState() Hook을 사용하여 상태 관리

✔️ 클래스보다 코드가 간결하고 직관적

✔️ this 키워드 필요 없음

 

---

🔍  차이점 비교

	Class Component	Functional Component
문법	class 사용 (extends Component)	function 사용
상태 관리	this.state 사용	useState() Hook 사용
이벤트 핸들러	this.handleClick = this.handleClick.bind(this); 필요	const handleClick = () => {} (바인딩 필요 없음)
라이프사이클	componentDidMount(), componentDidUpdate()등 사용	useEffect() Hook 사용
코드 가독성	비교적 복잡함	더 간결하고 직관적
성능	React 16.8 이후, 성능 차이는 거의 없음	초기 렌더링 성능이 더 좋음
React 최신 트렌드	거의 사용되지 않음 (유지보수 코드에서만 사용)	✅ 대부분의 프로젝트에서 함수형 컴포넌트 사용!

 

 

---

결론: 함수형 컴포넌트를 쓰는 게 좋을까?

✅ React 최신 버전에서는 함수형 컴포넌트가 권장됨.

 

1️⃣ 코드가 간결하고 가독성이 뛰어남

2️⃣ Hooks (useState, useEffect)를 사용해 라이프사이클을 쉽게 관리 가능

3️⃣ 성능 차이가 거의 없고, React 최신 문법과 호환이 좋음