[React] 컴포넌트(Component)

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.컴포넌트(Component)

사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드의 조각을 의미합니다.
컴포넌트는 HTML, CSS, JavaScript를 포함하여 특정 UI 부분을 정의하고, 이를 통해 복잡한 UI를 작은 단위로 나누어 효율적으로 관리할 수 있습니다.

• 재사용성: 컴포넌트는 여러 곳에서 재사용될 수 있습니다.
• 독립성: 각 컴포넌트는 자체적인 상태와 메서드를 가질 수 있습니다.
• 구성 가능성: 컴포넌트는 다른 컴포넌트를 포함할 수 있어 복잡한 UI를 구성할 때 유용합니다.
• 선언적: 리액트는 선언적 방식으로 UI를 정의하므로 코드가 더 직관적이고 유지보수가 용이합니다.

 

 

2.클래스 컴포넌트 (Class Components)

ES6 클래스 문법을 사용하여 정의되며, React.Component를 상속받아 만들어집니다. 클래스 컴포넌트는 상태(state)와 생명주기 메서드(lifecycle methods)를 사용할 수 있습니다.

import React, { Component } from 'react';

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default MyComponent;

 

 

 

3.함수형 컴포넌트 (Functional Components)

단순히 JavaScript 함수를 사용하여 정의됩니다.
리액트의 최신 버전에서는 useState, useEffect와 같은 Hook을 사용하여 상태와 생명주기 메서드를 사용할 수 있습니다.

 

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default MyComponent;