[React] 컴포넌트 개념 (Component)

React 컴포넌트란?

**UI의 작은 조각(블록)**이야. HTML의 <div> 같은 요소가 아니라, “화면에서 어떤 역할(버튼, 카드, 리스트, 모달 등)을 하는 코드 단위” 입니다.
레고 블록처럼 조합해서 큰 UI를 만든다고 생각하면 쉽습니다. 각각의 컴포넌트는 **자기 책임(책임 단위: 한 가지 역할)**을 갖는 게 좋습니다.
React에서는 보통 함수형 컴포넌트를 사용합니다. 그냥 함수인데, JSX(HTML처럼 보이는 문법)를 반환하면 그게 컴포넌트가 됩니다.

// hello.js
function Hello() {
  return <h1>안녕!</h1>;
}

export default Hello;

 

컴포넌트 주의할점

이름은 대문자로 시작
<hello /> → HTML 태그로 인식됨.
<Hello /> → React 컴포넌트로 인식됨.

하나의 컴포넌트는 하나의 JSX 요소만 반환
여러 요소를 쓰고 싶으면 <div>로 감싸거나, <> </> 같은 React Fragment를 사용.

// 잘못된 예시 X
function App() {
  return (
    <h1>안녕</h1>
    <p>반가워</p>
  );
}

// 올바른 예시 O
function App() {
  return (
    <div>
      <h1>안녕</h1>
      <p>반가워</p>
    </div>
  );
}

function App() {
  return (
    <>
      <h1>안녕</h1>
      <p>반가워</p>
    </>
  );
}

컴포넌트는 순수 함수처럼 동작
화면에 직접 DOM을 건드리거나(global 변수를 막 바꾸는 등) 하면 예측하기 힘들짐.

---

컴포넌트의 종류

함수형 컴포넌트 (Functional Component) — 요즘 표준. Hooks(useState, useEffect 등)로 상태/사이클 제어.

• useState Hook 사용
• 더 간결한 코드

---

클래스형 컴포넌트 (Class Component) — 예전 방식. 지금도 존재하지만 신규 코드에선 거의 쓰지 않음. 핵심 개념 이해용으로만 알면 됨.

• this.state와 this.setState() 사용
• constructor에서 상태 초기화
• render() 메서드 필요

import React, { useState, Component } from 'react';


// 함수형 컴포넌트
function FunctionComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>함수형 컴포넌트</h3>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}


// 클래스형 컴포넌트
class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h3>클래스형 컴포넌트</h3>
        <p>카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}


// 사용 예시
function App() {
  return (
    <div>
      <FunctionComponent />
      <ClassComponent />
    </div>
  );
}
export default App;

둘 다 동일한 기능을 하지만, 현재는 함수형 컴포넌트가 권장됩니다.

---

useState Hook과 같은 개념은 나중에 배울 개념으로 크게 신경쓰지 마시고, 컴포넌트를 만들때
함수형과, 클래스형이 이런식으로 만들어진다는것에 초점을 두고 보시면 좋을꺼 같습니다.

그리고 현재는 함수형 컴포넌트가 많이 쓰인다는 부분을 인지하시고 클래스형 컴포넌트는 이런식으로 작성해서 사용한다만 알고 있으면 되겠습니다.