React 정복을 위해 천천히 한 걸음 한 걸음 달려 나갑니다!

✨ React 컴포넌트의 종류

React는 컴포넌트 기반 개발 방식을 따르고 있습니다.

컴포넌트 기반 개발 (Component-Based Development)은 애플리케이션을 작은, 독립적이고 재사용 가능한 부분들로 나누는 개발 방식입니다.
이렇게 작은 부분들을 컴포넌트(Component)라고 부릅니다.

리액트에서 컴포넌트는 크게 두 가지 유형으로 구분됩니다.
바로 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)입니다!

😉 클래스형 컴포넌트

• ES6의 클래스 문법을 사용하여 정의됩니다.
• React.Component를 상속받아 작성합니다.
• 상태(state) 관리와 생명주기(Lifecycle) 메서드를 사용할 수 있습니다.
• 클래스 컴포넌트에서는 render() 메서드를 사용하여 UI를 반환합니다.

아래는 클래스형 컴포넌트를 사용한 예시 코드입니다!

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }

  render() {
    return (
      <div>
        {this.state.message}
      </div>
    );
  }
}

export default MyClassComponent;

🤗 함수형 컴포넌트

• 일반 자바스크립트 함수로 정의됩니다.
• 리액트 v16.8부터 Hooks를 도입하면서 상태 관리와 생명주기 메서드를 사용할 수 있게 되었습니다.
• 간결하고 가독성이 좋습니다.
• 최근에는 함수형 컴포넌트를 주로 사용하는 추세입니다.

아래는 함수형 컴포넌트를 사용한 예시 코드입니다!

import React, { useState } from 'react';

function MyFunctionalComponent(props) {
  const [message, setMessage] = useState('Hello, World!');

  return (
    <div>
      {message}
    </div>
  );
}

export default MyFunctionalComponent;

😎 클래스형 컴포넌트 VS 함수형 컴포넌트

클래스형 컴포넌트

• 장점
  • 생명주기 메서드를 사용할 수 있어, 초기화 및 해제 등의 작업을 처리할 수 있습니다.
• 단점
  • 코드가 상대적으로 길고 복잡하며, this 바인딩 등 추가적인 주의사항이 필요합니다.

함수형 컴포넌트

• 장점
  • 코드가 간결하고 가독성이 좋습니다.
  • 함수 스코프를 사용하기 때문에 this 바인딩 문제가 없습니다.
  • 메모리 자원을 클래스형 컴포넌트보다 덜 사용합니다.
• 단점
  • 과거에는 상태 관리와 생명주기 메서드를 사용할 수 없었지만, 최근에 도입된 Hooks로 인해 이러한 단점이 상당 부분 해소되었습니다.

최근에는 함수형 컴포넌트와 Hooks를 사용하는 것이 권장되고 있습니다.
그러나 여전히 기존에 작성된 클래스형 컴포넌트가 많으므로, 두 가지 유형의 컴포넌트를 모두 이해하고 사용할 수 있어야 합니다.

요약하자면, 클래스형 컴포넌트와 함수형 컴포넌트는 각각 다음과 같습니다!

• 클래스 컴포넌트
  • ES6 클래스 문법을 사용, 상태 관리와 생명주기 메서드를 활용할 수 있으나 코드가 상대적으로 길고 복잡합니다.
    
    
• 함수형 컴포넌트
  • 일반 자바스크립트 함수로 작성, Hooks 도입으로 상태 관리와 생명주기 메서드를 활용할 수 있게 되었으며 코드가 간결하고 가독성이 좋습니다.