컴포넌트(Component)는 독립적이고 재사용 가능한 UI 조각(부품)이에요. 버튼 하나, 카드 하나, 헤더 하나가 각각 컴포넌트가 될 수 있어요. 이 부품들을 레고처럼 조립해서 페이지 전체를 만듭니다.

우리가 배우는 방식은 함수 컴포넌트예요. 말 그대로 "대문자로 시작하는 함수가 JSX를 return"하면 그게 컴포넌트예요. 정말 이게 전부입니다.

// 함수 컴포넌트 정의 — 대문자 Welcome, JSX를 return
function Welcome() {
  return 
안녕
;
}

// 사용 — HTML 태그처럼  로 씀

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

function add(a, b) {
      return a + b; // 숫자를 계산해서 값을 리턴
    }

function Button() {
      return <button>클릭</button>; // 숫자가 아니라 화면(UI)을 리턴
    }

function App() {
      return (
        <div>
          <Header />
          <Button />
          <Footer />
        </div>
      );
    }

function add(a, b) {
  return a + b;
}

export default add; // 이 함수를 다른 파일에서 쓸 수 있게 내보냄

import add from './math.js'; // math.js에서 add 함수를 가져옴

console.log(add(2, 3)); // 5

import React from 'react';
import Header from './Header'; // 내가 만든 Header 컴포넌트 가져오기

function App() {
  return <Header />;
}

export default App; // App 컴포넌트를 다른 곳에서 쓸 수 있게 내보내기

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

function Secret({ isLogin }) {
          if (!isLogin) {
            return null;
          }

          return <h1>비밀 페이지</h1>;
        }

function Welcome() {
        }

function test() {}
        console.log(test()); // undefined

리액트에는 아주 중요한 규칙이 하나 있어요. 컴포넌트 이름은 반드시 대문자로 시작해야 합니다. 왜냐하면 JSX에서 태그를 만났을 때, 리액트는 첫 글자로 그게 "내 컴포넌트"인지 "일반 HTML 태그"인지를 구분하기 때문이에요.

function Welcome() {
  return 
안녕
;
}

   // ✅ 대문자 → 내 컴포넌트 실행
   // ❌ 소문자 → HTML 태그로 오해, 동작 안 함

컴포넌트를 재사용하려면, 상황마다 다른 데이터를 넣어줄 수 있어야 해요. 이때 쓰는 게 props(프롭스, properties)예요. 부모가 자식 컴포넌트를 쓸 때 HTML 속성처럼 값을 적어주면, 자식이 그 값을 받아 씁니다.

function Card(props) {
  return <div className="card">{props.title}</div>;
}

function App() {
  return (
    <div>
      <Card title="사과" />
      <Card title="바나나" />
      <Card title="딸기" />
    </div>
  );
}

// 부모: name 이라는 props에 "철수" 를 담아 내려줌

// 1. 자식 컴포넌트 정의 — name이라는 props를 받아서 화면에 씀
function Welcome({ name }) {
  return <h1>안녕, {name}!</h1>;
}

// 2. 부모 컴포넌트 — 여기서 실제로 값을 "지정"함
function App() {
  return (
    <div>
      <Welcome name="철수" />
      <Welcome name="영희" />
    </div>
  );
}

안녕, 철수!
안녕, 영희!

자식 컴포넌트는 이 값을 첫 번째 매개변수 props로 받아요. 전달한 값들은 모두 props 객체에 담겨 들어옵니다.

// 자식: props 객체로 받아서 props.name 으로 사용
function Welcome(props) {
  return 
{props.name}
;
}
// 결과: 
철수

// 구조 분해 — { name } 으로 바로 꺼냄
function Welcome({ name }) {
  return 
{name}
;
}

아주 중요한 규칙이에요. 자식 컴포넌트는 부모에게 받은 props를 마음대로 바꾸면 안 됩니다. props는 읽기 전용(read-only)이에요. 부모가 준 데이터를 자식이 몰래 바꿔버리면, 데이터가 어디서 어떻게 변했는지 추적하기가 지옥이 되니까요.

function Welcome({ name }) {
  name = "영희";   // ❌ 절대 금지! props를 바꾸면 안 됨
  return 
{name}
;
}

지금까지는 <Welcome name="철수" />처럼 속성(attribute)으로 값을 넘겼어요. 그런데 컴포넌트를 여는 태그와 닫는 태그로 감싸서 그 사이에 내용을 넣으면, 그 내용이 props.children이라는 특별한 props로 전달돼요.

<div>
  안녕하세요
</div>

<div>
  <h1>제목</h1>
  <p>본문</p>
</div>

<Card>
  안녕하세요
</Card>

Card({
  children: "안녕하세요"
});

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

<div className="card">
  안녕하세요
</div>

<Card>
  <h1>제목</h1>
  <p>본문</p>
</Card>

// 사용: 태그 사이에 "내용" 을 넣음
<Card>내용</Card>

// 정의: props.children 으로 그 "내용" 을 받음
function Card({ children }) {
  return <div className="card">{children}</div>;
}
// 결과: <div class="card">내용</div>