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

오늘은 아주아주 기초적인 컴포넌트 종류에 대해 개념 정리하고자 한다 (아카이빙용).

기초를 배우는 사람들은 이러한 차이가 있구나~라고 이해라도 해주면 좋을 것 같다.

---

React 컴포넌트란?

먼저 React 컴포넌트가 뭘까?

React에서 컴포넌트는 UI를 구성하는 가장 기본적인 단위이다.

웹 페이지를 레고 블록으로 비유한다면, 컴포넌트는 각각의 레고 조각이라고 할 수 있다.

(재사용이 가능하고, 독립적이며, 고유한 기능을 가진 UI 조각들!! 🧩)

---

클래스형 컴포넌트

클래스형 컴포넌트는 React의 전통적인 방식으로, ES6의 class를 사용하여 정의한다.

💡ES6란?
ECMAScript 6로서 2015년 공식적으로 업데이트한 자바스크립트 문법이다.

React.Component를 상속받아 만들어지며, 반드시 render() 메소드를 포함해야한다.

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '안녕하세요!'
    };
  }

  handleClick = () => {
    this.setState({
      message: '환영합니다!'
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.handleClick}>
          클릭하세요
        </button>
      </div>
    );
  }
}

이 코드에서는 Welcome이라는 클래스형 컴포넌트를 보여준다.

constructor에서 state를 초기화하고, handleClick 메소드를 통해 state를 업데이트하며, render 메소드는 실제로 화면에 표시될 UI를 반환한다.

---

함수형 컴포넌트

함수형 컴포넌트는 더 현대적인 접근 방식으로, 간단한 JavaScript 함수를 사용하여 컴포넌트를 정의한다!

import React, { useState } from 'react';

const Welcome = () => {
  const [message, setMessage] = useState('안녕하세요!');

  const handleClick = () => {
    setMessage('환영합니다!');
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>
        클릭하세요
      </button>
    </div>
  );
};

이 코드는 위의 클래스형 컴포넌트와 동일한 기능을 하지만, 훨씬 간결하다!

useState Hook을 사용하여 상태를 관리하고, 함수를 직접 정의하여 이벤트를 처리하는 것을 볼 수 있다!

---

클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트의 주요 특징을 보자.

생명주기 메소드를 사용할 수 있다. (componentDidMount, componentDidUpdate 등)

this 키워드를 통해 state와 props에 접근한다.

constructor에서 state를 초기화하고 메소드를 바인딩한다.

render 메소드가 필수적으로 필요하다.

 

그럼 반대로 함수형 컴포넌트의 주요 특징을 봐볼까?

Hook을 사용하여 상태 관리와 생명주기 기능을 구현한다.

this 키워드가 필요 없어 코드가 더 직관적이다.

보일러플레이트 코드가 적어 간결하다.

테스트와 재사용이 더 용이하다.

 

누가봐도 함수형 컴포넌트가 더 간결하고 쉽고 직관적인것을 볼 수 있다. (사실 필자는 함수형 컴포넌트만 사용한다.)

 

성능 측면에서는 함수형 컴포넌트가 약간 더 유리하다고 본다.

(클래스형 컴포넌트는 인스턴스를 생성해야 하므로 메모리를 더 사용하게되고 번들 크기도 함수형 컴포넌트가 더 작기 때문에)

 

코드 구성 측면에서는 클래스형 컴포넌트의 경우 복잡성이 높아질 것 같다. 클래스형 컴포넌트는 모든 로직이 클래스 안에 집중되어 있기 때문이다.

필자가 함수형 컴포넌트를 사용하는 이유는 로직을 여러 Hook으로 분리하여 관리할 수 있어 더 모듈화된 코드 작성이 가능해서이기 때문!