React의 컴포넌트: 함수형 vs. 클래스 컴포넌트

Source: Dev.to

React 컴포넌트란?

React 컴포넌트는 UI를 위한 재사용 가능한 빌딩 블록입니다. UI를 더 작고 독립적인 조각으로 나눌 수 있게 해줍니다.

React에서의 컴포넌트 유형

React에는 두 가지 유형의 컴포넌트가 있습니다:

• Functional Components (현대적, 권장)
• Class Components (구식)

1. Functional Components (권장)

Functional 컴포넌트는 JSX를 반환하는 JavaScript 함수입니다.

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Functional 컴포넌트를 사용하는 이유

• 더 간단하고 읽기 쉬움
• this 키워드가 필요 없음
• Hooks(useState, useEffect 등)는 functional 컴포넌트에서만 작동

2. Class Components (구식 방법)

Class 컴포넌트는 ES6 클래스를 사용하고 render() 메서드로 JSX를 반환합니다.

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default Greeting;

Class 컴포넌트를 피해야 하는 이유

• 더 복잡한 문법
• this 키워드가 혼란스러울 수 있음
• useState 같은 Hooks를 직접 사용할 수 없음

컴포넌트의 State

✅ Functional 컴포넌트에서의 State (useState 사용)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

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

export default Counter;

❌ Class 컴포넌트에서의 State (this.state 사용)

import React, { Component } from "react";

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

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

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

export default Counter;

Hooks(useState)를 사용하는 Functional 컴포넌트는 더 짧고 깔끔합니다.

컴포넌트의 Props

✅ Functional 컴포넌트에서 Props 사용

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
// <Welcome name="Alice" />

❌ Class 컴포넌트에서 Props 사용

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
// <Welcome name="Alice" />

Functional vs. Class 컴포넌트 비교

결론

• Functional 컴포넌트를 사용하세요. 더 나은 성능과 가독성을 위해.
• Functional 컴포넌트는 React Hooks(useState, useEffect 등)를 지원합니다.
• Class 컴포넌트는 구식으로 간주되며 레거시 코드를 유지보수하는 경우를 제외하고는 피하는 것이 좋습니다.