[React] 컴포넌트(Component)

React에서 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기본 단위입니다. 컴포넌트는 재사용 가능하고 독립적인 코드 블록으로, UI의 일부분을 정의합니다. React의 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다: 함수형 컴포넌트와 클래스형 컴포넌트입니다.

 

 

1. 함수형 컴포넌트 (Functional Component)

함수형 컴포넌트는 간단한 JavaScript 함수로, props를 인자로 받아 UI를 반환합니다. 상태 관리와 라이프사이클 메서드가 필요한 경우 React Hooks를 사용하여 상태를 관리할 수 있습니다.

import React from 'react';

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

export default MyComponent;

 

• Hooks를 사용하는 예제

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

 

 

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

클래스형 컴포넌트는 React.Component를 상속받아 정의합니다. 상태와 라이프사이클 메서드를 직접 정의할 수 있습니다. 현재는 함수형 컴포넌트와 Hooks가 많이 사용되지만, 클래스형 컴포넌트도 여전히 유용할 수 있습니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default MyComponent;

 

• 상태와 라이프사이클 메서드를 사용하는 예제

import React, { Component } from 'react';

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

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default Counter;

 

 

3. 컴포넌트의 주요 개념

1. Props (속성): 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. props는 읽기 전용이며, 컴포넌트 내에서 수정할 수 없습니다.
2. State (상태): 컴포넌트의 동적인 데이터를 관리하는 방법입니다. 상태는 컴포넌트 내에서 직접 수정할 수 있으며, 컴포넌트의 생명 주기 동안 유지됩니다.
3. Lifecycle Methods (라이프사이클 메서드): 컴포넌트의 생명 주기 동안 호출되는 메서드들입니다. 클래스형 컴포넌트에서만 사용하며, 함수형 컴포넌트에서는 Hooks를 통해 유사한 기능을 구현할 수 있습니다.
4. Hooks: 함수형 컴포넌트에서 상태와 사이드 이펙트를 관리하기 위해 사용됩니다. 주요 Hooks에는 useState, useEffect, useContext 등이 있습니다.
5. Event Handling (이벤트 처리): React에서는 이벤트를 처리하기 위해 이벤트 핸들러를 사용할 수 있습니다. 예를 들어, 버튼 클릭 이벤트를 처리하는 등의 작업을 수행합니다.