Components

React의 컴포넌트(components)는 UI를 구축하기 위한 재사용 가능한 코드 블록입니다.

컴포넌트는 독립적이고 자족적(self-contained)이며, 각 컴포넌트는 자신의 상태와 수명주기 메서드를 가질 수 있습니다.

React 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다: 클래스 컴포넌트(class components)와 함수형 컴포넌트(function components)입니다.

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

클래스 컴포넌트는 ES6 클래스 문법을 사용하여 정의됩니다. 상태(state)와 생명주기 메서드(lifecycle methods)를 가질 수 있습니다.

jsx코드 복사
import React, { Component } from 'react';

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

  componentDidMount() {
    // 컴포넌트가 마운트된 후 실행
  }

  componentDidUpdate(prevProps, prevState) {
    // 컴포넌트가 업데이트된 후 실행
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되기 전에 실행
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

export default MyComponent;

2. 함수형 컴포넌트 (Function Components)

함수형 컴포넌트는 함수 문법을 사용하여 정의되며, React의 useState 및 useEffect와 같은 훅(hooks)을 통해 상태와 생명주기를 관리할 수 있습니다.

jsx코드 복사
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 컴포넌트가 마운트된 후 및 업데이트될 때 실행
    return () => {
      // 컴포넌트가 언마운트될 때 실행
    };
  }, [count]); // 의존성 배열

  const handleClick = () => {
    setCount(count + 1);
  };

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

export default MyComponent;

특징

• 재사용성: 컴포넌트는 재사용 가능한 단위로, 한 번 정의하면 여러 곳에서 재사용할 수 있습니다.
• 모듈화: 컴포넌트는 독립적으로 동작하며, 애플리케이션을 작은 단위로 나누어 관리할 수 있게 합니다.
• 상태 관리: 각 컴포넌트는 자신의 상태(state)를 가질 수 있으며, 상태가 변경되면 자동으로 UI가 업데이트됩니다.
• 생명주기 메서드: 컴포넌트는 특정 시점에 실행되는 생명주기 메서드를 통해 특정 시점에 필요한 작업을 수행할 수 있습니다.

이처럼 React 컴포넌트는 복잡한 UI를 구성하고 관리하는 데 필요한 기본 단위입니다.

Component-Based

component는 다양한 component의 조합으로 구성될 수 있다.