[React] 함수형 컴포넌트와 클래스형 컴포넌트

React에서 컴포넌트는 사용자 인터페이스를 구축하는 기본 블록을 말한다.

컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다.

 

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

자바스크립트 함수로 정의된 컴포넌트를 말한다.

• 특징
  • 상태(state)와 생명주기 메서드가 없었으나 React 16.8에서 도입된 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 기능을 사용할 수 있다.
  • 코드가 더 간결하고 이해하기 쉽다.
  • 사이드 이펙트 없이 순수 함수처럼 사용될 수 있다.
  • this 키워드를 사용하지 않는다.
  • 컴포넌트 로직을 분리하기 쉽고 테스트가 용이하다.
  • 메모리 사용이 더 효율적이다.
• 예시

import React from 'react';

const MyComponent = (props) => {
  return 
    <div> Hello, {props.name} </div>
  ;
};

export default MyComponent;

 

 

2. 클래스형 컴포넌트 (Class Component)

ES6 클래스 문법을 사용하여 정의된 컴포넌트이다.

• 특징
  • 상태(state)와 생명주기 메서드를 기본적으로 지원한다.
  • this 키워드를 사용하여 컴포넌트의 인스턴스를 참조한다.
  • 함수형 컴포넌트보다 구조가 복잡할 수 있다.
  • 초기 설정이 더 복잡할 수 있다.
• 예시

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return 
      <div> Hello, {this.props.name} </div>
    ;
  }
}

export default MyComponent;

 

 

3. 비교

특성	함수형 컴포넌트	클래스형 컴포넌트
구조	간단하고 간결한 구조	상대적으로 복잡한 구조
상태 관리	useState 및 useReducer와 같은 Hooks로 사용 가능	this.state를 사용해 클래스 내부에서 상태 관리
생명주기 메서드	useEffect와 같은 Hooks로 사용 가능	componentDidMount와 같은 메서드로 사용
this 사용 여부	this 키워드 사용하지 않음	this 키워드 필요
성능	더 나은 메모리 관리 및 성능 최적화 가능	약간 더 많은 메모리 사용
함수형 프로그래밍 적합성	순수 함수와 같은 형태로 쉽게 사용 가능	클래스 메서드 내부에서 상태 변이를 일으킬 수 있음

 

 다음과 같은 결과로 현재 리액트 커뮤니티에서는 함수형 컴포넌트를 더 권장하고 있다. Hooks의 도입으로 인해 이제는 상태 관리와 생명주기 제어를 포함하여 거의 모든 작업을 수행할 수 있으며 더 간결하고 직관적이며 유지 보수하기 쉽다. 클래스형 컴포넌트는 이전 버전의 리액트에서 주로 사용되었으며 아직도 일부 레거시 코드베이스에서 사용하고 있지만 새로운 프로젝트에서는 함수형 컴포넌트로 작성하는 것이 일반적이다.