React Component

---

🧩 React Component란?

정의

React Component는 화면을 구성하는 독립적인 UI 단위다.

버튼, 입력창, 목록, 레이아웃처럼 반복해서 재사용할 수 있는 UI를 각각의 컴포넌트로 나누어 관리한다.

🧠 특징

• 컴포넌트 이름은 PascalCase로 작성한다.
• 함수형 컴포넌트가 일반적으로 많이 사용된다.
• props를 통해 부모에서 자식으로 데이터를 전달할 수 있다.
• 컴포넌트를 잘게 나누면 재사용성과 유지보수성이 좋아진다.

🛠️ 기본 예시

import { useState } from "react";

export default function App() {
  const [weight, setWeight] = useState(0);
  const [height, setHeight] = useState(0);

  let content;
  const bmi = weight =** 0 || height **= 0 ? 0 : weight / (0.01 * 0.01 * height * height);

  if (weight =** 0 || height **= 0) {
    content = <div>계산불가</div>;
  } else if (bmi < 18.5) {
    content = <div>저체중</div>;
  } else if (bmi < 25) {
    content = <div>정상</div>;
  } else {
    content = <div>과체중</div>;
  }

  return (
    <>
      <h1>BMI 계산기</h1>
      <div>
        <label>
          신장
          <input
            type="number"
            onChange={(e) => setHeight(e.target.value)}
          />
        </label>
      </div>
      <div>
        <label>
          체중
          <input
            type="number"
            onChange={(e) => setWeight(e.target.value)}
          />
        </label>
      </div>
      {content}
    </>
  );
}

🧱 컴포넌트 분리 예시

export default function AppFooter() {
  return (
    <>
      <h2>AppFooter</h2>
    </>
  );
}

import AppFooter from "./components/AppFooter";

export default function App() {
  return (
    <>
      <h1>App</h1>
      <AppFooter />
    </>
  );
}

⚖️ 장점과 주의점

장점

• UI 요소를 분리해서 관리할 수 있다.
• 재사용이 쉽다.
• 구조를 나누면 유지보수가 편하다.

주의점

• 너무 잘게 쪼개면 오히려 구조가 복잡해질 수 있다.
• 컴포넌트 간 데이터 흐름을 잘 설계해야 한다.

📌 정리

• React Component는 UI를 구성하는 기본 단위다.
• 함수형 컴포넌트와 props를 함께 이해하면 좋다.
• 화면을 역할별로 나누면 읽기 쉽고 관리하기도 편하다.

---

연결문서

• React-JSX
• React-Props
• React-Fragment
• CustomComponent