[React] Component

리액트의 컴포넌트는 UI를 재사용 가능하고 독립적인 조각으로 나누는 React의 핵심 개념이다.
함수형 또는 클래스형으로 작성되며, HTML과 로직을 결합하여 동적인 UI를 구현한다.
리액트 16.8 이후로는 함수형 컴포넌트와 함께 훅(Hooks)을 사용하여 상태 관리와 라이프사이클 기능을 구현하는 것이 더 일반적이다.

특징

• 재사용성 : 동일한 UI 요소를 여러 곳에서 재사용 가능
• 상태(state)와 데이터(props) : state와 props를 통해 동적인 UI를 구현
• 조합 가능성 : 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 만들 수 있음
• 렌더링 로직 포함 : 렌더링될 HTML과 이벤트 핸들러 등 UI 동작을 포함
• 예시

  function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
  }

⚠️ 주의사항

• 컴포넌트 이름은 PascalCase로 작성 (예: MyComponent)
• 의미 단위로 파일을 분리하여 관리
• 최상위 컴포넌트의 이름은 일반적으로 App

---

Props (속성)

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 속성이다.

• 읽기 전용이다. (✨불변, 자식 컴포넌트에서 수정할 수 없다.)

• 예시

  function Greeting({ message }) {
      return <p>{message}</p>;
  }
  
  <Greeting message="좋은 하루~" />;

---

클래스형 컴포넌트 🆚 함수형 컴포넌트

함수형 컴포넌트

• props를 받아 JSX를 반환하며, 간단하고 선언적이다.
• React 16.8 이후 useState, useEffect 등을 사용하여 상태와 생명주기를 관리할 수 있다.
• 예시

  function Welcome({ name }) {
      return <h1>안녕하세요, {name}!</h1>;
  }

클래스형 컴포넌트

• ES6 클래스를 사용하여 정의한다.

• 상태와 라이프사이클 메서드를 사용할 수 있다.

• 예시

  import React, { Component } from 'react';
  
  class Welcome extends Component {
      render() {
          return <h1>안녕하세요, {this.props.name}!</h1>;
      }
  }

비교

특징	클래스형 컴포넌트	함수형 컴포넌트
문법	클래스 문법 사용	함수형 문법 사용
state 관리	가능(this.state)	가능(useState)
생명주기 관리	클래스 메서드 사용	useEffect로 대체
가독성	상대적으로 복잡	간단하고 직관적
코드 재사용성	HOC, Render Props	Custom Hook으로 간단히 해결

---

State (상태)

• 컴포넌트 내부에서 관리되는 동적인 데이터이다.

• 함수형 컴포넌트에서는 useState 훅을 사용한다.

  import { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>현재 카운트: {count}</p>
        <button onClick={() => setCount(count + 1)}>증가</button>
      </div>
    );
  }

---

컴포넌트 라이프사이클

• 클래스형 컴포넌트는 라이프사이클 메서드(예. componentDidMount, componentDidUpdate)를 사용한다.

• 함수형 컴포넌트는 useEffect 훅을 사용하여 동일한 작업을 수행한다.

  import { useEffect } from 'react';
  
  function App() {
    useEffect(() => {
      console.log('컴포넌트가 마운트되었습니다.');
  
      return () => {
        console.log('컴포넌트가 언마운트됩니다.');
      };
    }, []); // 빈 배열이면 처음 한 번만 실행
  }

---

컴포넌트 종류

프레젠테이셔널 컴포넌트 (Presentational Components)

• UI에 집중하고, 상태를 가지지 않는다.
• 주로 UI를 렌더링하고, props를 받아서 그에 맞는 화면을 출력한다.
• 상태를 직접 관리하지 않기 때문에, 부모 컴포넌트로부터 데이터를 받아서 화면을 그린다.

컨테이너 컴포넌트 (Container Components)

• 상태를 관리하거나 비즈니스 로직을 포함한다.
• 프레젠테이셔널 컴포넌트를 감싸고 있으며, 데이터를 로드하거나 사용자 상호작용을 처리하고,
  이를 프레젠테이셔널 컴포넌트에 전달한다.
• 상태나 데이터 로직을 처리하고, 자식 컴포넌트에 props로 전달하는 역할을 합니다.

---

컴포넌트 컴포지션 (Component Composition)

• 컴포넌트 컴포지션은 여러 개의 컴포넌트를 조합하여 복잡한 UI를 만드는 방식이다.

• 각 컴포넌트는 자신만의 역할을 가지며, 부모 컴포넌트가 여러 자식 컴포넌트를 관리하고 결합하여 복잡한 UI를 만든다.

• 예시

  // Header, Main, Footer 컴포넌트를 각각 정의하고,
  // App 컴포넌트에서 이들을 조합하여 하나의 전체 UI를 구성함
  function App() {
    return (
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    );
  }