React에서 함수 컴포넌트와 클래스 컴포넌트 작성 방법

React는 컴포넌트 기반의 UI 라이브러리로, 두 가지 주요한 컴포넌트 유형인 함수 컴포넌트와 클래스 컴포넌트를 제공합니다. 이번 포스팅에서는 React에서 함수 컴포넌트와 클래스 컴포넌트를 작성하는 방법에 대해 알아보겠습니다.

 

 함수 컴포넌트(Function Components)

함수 컴포넌트는 함수로 정의되며, 간단하고 명확한 구조를 가지고 있습니다. 주로 UI를 렌더링하는 역할을 수행합니다.

import React from 'react';

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

export default MyComponent;

위의 예제에서는 MyComponent라는 간단한 함수 컴포넌트를 정의하고 있습니다. 함수 내부에서 JSX를 반환하며, 이 JSX는 화면에 렌더링됩니다. 

클래스 컴포넌트(Class Components)

클래스 컴포넌트는 ES6 클래스로 정의되며, React.Component 클래스를 확장하여 만듭니다. 클래스 컴포넌트는 상태(state)를 가질 수 있고, 라이프사이클 메서드를 사용할 수 있습니다.

import React, { Component } from 'react';

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

export default MyComponent;

위의 예제에서는 MyComponent라는 클래스 컴포넌트를 정의하고 있습니다. 클래스 내부에 render() 메서드를 포함하여 JSX를 반환하고 있습니다. render() 메서드는 컴포넌트가 렌더링될 때 호출되며, 화면에 무엇을 표시할지를 정의합니다.

언제 어떤 것을 사용해야 할까요?

1. 함수 컴포넌트:
   - 간단한 UI를 가진 컴포넌트를 작성할 때
   - 상태나 라이프사이클 메서드가 필요하지 않을 때
   - React Hooks를 사용하여 상태와 생명주기 관리가 가능한 경우

2. 클래스 컴포넌트:
   - 상태나 라이프사이클 메서드가 필요한 경우
   - 하위 컴포넌트들과의 상태 공유가 필요한 경우

React 16.8부터는 함수 컴포넌트에서도 상태와 라이프사이클 관리가 가능하게 되었으므로, 대부분의 경우 함수 컴포넌트를 사용하는 것이 권장됩니다. 하지만 기존 코드베이스에서는 클래스 컴포넌트를 여전히 사용할 수 있습니다.

이상으로 React에서 함수 컴포넌트와 클래스 컴포넌트를 작성하는 방법에 대해 알아보았습니다. 각각의 특징과 사용 사례에 대해 이해하고 적절히 활용하여 개발하는 것이 중요합니다.