리액트의 컴포넌트 생성 방식

React에서 컴포넌트를 생성하는 방법은 크게 두 가지가 있음.

1. 클래스 컴포넌트(Class Components):
   • 클래스 컴포넌트는 React.Component 클래스를 확장하여 만듬.
   • render() 메서드를 구현하여 해당 컴포넌트가 어떻게 렌더링될지 정의함.
   • 다양한 라이프사이클 메서드를 사용하여 컴포넌트의 동작을 제어할 수 있음.
   • 상태(State)를 관리할 수 있으며, setState() 메서드를 사용하여 상태를 업데이트할 수 있음.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default MyComponent;

1. 함수 컴포넌트(Function Components):
   • 함수 컴포넌트는 간단한 JavaScript 함수로 정의됨.
   • 함수 내에서 JSX를 반환하여 해당 컴포넌트가 렌더링될 내용을 정의함.
   • 상태(State)를 관리할 수 없으며, 생명주기 메서드를 사용할 수 없었음.
   • React 16.8 버전부터는 함수 컴포넌트에서도 상태를 관리할 수 있도록 useState 훅과 같은 기능이 도입됨.

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default MyComponent;

요약:

클래스 컴포넌트는 React.Component 클래스를 확장하여 생성되며, render() 메서드를 통해 UI를 정의하고, 상태(State)와 라이프사이클 메서드를 활용할 수 있습니다.

함수 컴포넌트는 간단한 JavaScript 함수로 정의되며, JSX를 반환하여 UI를 정의하며,

useState 훅을 사용하여 상태 관리가 가능하고, useEffect 훅을 사용하여 클래스 컴포넌트의 라이프사이클 메서드와 비슷한 동작을 수행할 수 있음.