클래스형 컴포넌트와 함수형 컴포넌트 차이

 

 

 

React에서 컴포넌트를 생성하는 데는 주로 두 가지 방식이 있다

클래스형 컴포넌트(Class Components)와 함수형 컴포넌트(Function Components)

각각의 방식은 컴포넌트를 정의하고 사용하는 방법에서 차이를 보인다

React의 초기 버전에서는 주로 클래스형 컴포넌트가 사용되었지만,

React 16.8부터 도입된 Hooks의 등장으로 함수형 컴포넌트의 사용이 늘어나고 있다

 

클래스형 컴포넌트

클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의된다

이 방식은 this 키워드를 사용하여 컴포넌트의 상태(state)와 생명주기 메소드(lifecycle methods)를 다룰 수 있다

장점:

• 생명주기 메소드를 사용할 수 있어, 컴포넌트가 생성되고 업데이트되고 제거되는 시점에 특정 작업을 실행할 수 있다
• 내부 상태(state)를 관리할 수 있다

단점:

• 보일러플레이트 코드가 많아질 수 있다
• 함수형 컴포넌트에 비해 다소 복잡할 수 있다

예시:

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

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

 

함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수를 사용하여 정의된다

Hooks API를 사용하여 이전에는 클래스형 컴포넌트에서만 가능했던 상태 관리와 생명주기 기능을 사용할 수 있다

장점:

• 간결한 코드: 클래스형 컴포넌트에 비해 더 간결하고 읽기 쉬운 코드를 작성할 수 있다
• Hooks를 통한 상태 관리와 부수 효과(side effects) 처리가 가능하다

단점:

• Hooks의 사용법을 익혀야 한다
• React 16.8 이전 버전에서는 사용할 수 없다

예시:

function MyFunctionComponent() {
  const [count, setCount] = React.useState(0);

  return <div>Count: {count}</div>;
}

 

결론

클래스형 컴포넌트와 함수형 컴포넌트는 각각의 사용 사례와 선호도에 따라 선택할 수 있다

Hooks의 등장으로 인해 함수형 컴포넌트가 더욱 강력해졌으며,

많은 개발자들이 함수형 컴포넌트와 Hooks를 선호하게 되었다

그러나 여전히 상황에 따라 클래스형 컴포넌트를 사용하는 것이 더 적합할 수 있다

React는 두 가지 유형의 컴포넌트를 모두 지원하므로, 프로젝트의 요구 사항에 맞게 가장 적합한 방식을 선택할 수 있다