[React] React 컴포넌트

React에서 컴포넌트(Component)는 UI를 구성하는 독립적인 모듈로서, 재사용성과 유지보수를 높이는 핵심 개념입니다. 각각의 컴포넌트는 자체적인 상태(State)와 속성(Props)을 가지며, UI의 작은 조각들을 분리하여 개발하고 조합함으로써 큰 규모의 웹 애플리케이션을 쉽게 개발할 수 있습니다. 아래에서 React 컴포넌트에 대해 자세히 알아보겠습니다.

---

컴포넌트 정의

React 컴포넌트는 일반적으로 클래스 기반 컴포넌트와 함수형 컴포넌트 두 가지 형태로 정의됩니다.

1-1. 클래스 기반 컴포넌트

import React from 'react';

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

클래스 기반 컴포넌트는 React.Component를 상속받아서 정의되며, render() 메서드 내에서 JSX를 반환합니다.

1-2. 함수형 컴포넌트

import React from 'react';

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

함수형 컴포넌트는 간단한 함수로 정의되며, JSX를 반환합니다.

---

컴포넌트 사용

컴포넌트는 다른 컴포넌트 내에서 사용되거나, 애플리케이션의 루트 컴포넌트로 사용될 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

위의 코드에서 MyComponent는 App 컴포넌트 내에서 사용되고 있습니다. 이렇게 컴포넌트를 조합하면 더 큰 규모의 애플리케이션을 쉽게 구성할 수 있습니다.

---

컴포넌트 속성(props)

컴포넌트는 속성(props)을 통해 데이터를 전달받을 수 있습니다.

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

위의 코드에서 Greeting 컴포넌트는 name이라는 속성(props)을 받아서 출력합니다. 이렇게 속성을 사용하면 컴포넌트를 재사용하고 동적인 데이터를 표현할 수 있습니다.

---

상태(State) 관리

클래스 기반 컴포넌트는 상태(State)를 가질 수 있습니다. 상태는 컴포넌트 내에서 변하는 데이터를 관리하는데 사용됩니다.

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

위의 코드에서 Counter 컴포넌트는 상태 count를 가지고 있으며, 버튼을 클릭할 때마다 상태를 업데이트하여 카운트를 증가시킵니다.

---

React 컴포넌트는 재사용성과 유지보수를 높이기 위한 핵심적인 개념입니다. 클래스 기반 컴포넌트와 함수형 컴포넌트를 활용하여 UI 요소를 작은 단위로 나누고 조합함으로써 큰 규모의 웹 애플리케이션을 개발할 수 있습니다. 속성(props)을 활용하여 동적인 데이터를 전달하고, 상태(State)를 관리하여 컴포넌트의 동작을 제어할 수 있습니다. React 컴포넌트를 적재적소에 활용하여 강력하고 효율적인 웹 애플리케이션을 개발해보세요!