React 컴포넌트와 JSX

React는 UI를 컴포넌트 라는 재사용 가능한 조각으로 나눠 만드는 라이브러리입니다. 화면을 통째로 그리는 대신, 작은 부품을 만들어 조립한다고 생각하면 쉽습니다.

학습 목표

• 함수형 컴포넌트가 무엇이고 어떻게 만드는지 안다.
• props 로 부모에서 자식으로 값을 내려보낼 수 있다.
• JSX의 핵심 규칙(className, 중괄호, fragment)을 지킬 수 있다.
• 리스트를 map 으로 그리고 key 를 올바르게 줄 수 있다.

첫 컴포넌트

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

// 사용
<Welcome name="민수" />

• 컴포넌트는 대문자로 시작합니다. 소문자로 시작하면 React가 일반 HTML 태그로 인식해요.
• { name } 처럼 받는 값을 props 라고 합니다.
• return 안의 HTML 같은 문법이 JSX 입니다.

props 더 알아보기

props는 부모 컴포넌트가 자식에게 건네주는 "입력값"입니다. 읽기 전용이라 자식이 직접 바꿀 수 없습니다.

function Profile({ name, age, isAdmin = false }) {
  return (
    <div>
      <p>{name} ({age}세)</p>
      {isAdmin && <span>관리자</span>}
    </div>
  );
}

<Profile name="지영" age={28} />        {/* isAdmin은 기본값 false */}
<Profile name="현우" age={31} isAdmin /> {/* 값 없이 쓰면 true */}

전달 형태	의미
name="지영"	문자열
age={28}	숫자·표현식은 중괄호로
isAdmin	값 생략 시 true

💡 TIP — props 이름은 카멜케이스(onClick, userId)로 쓰는 게 React 관례입니다.

JSX 규칙

function Card() {
  const title = '제목';
  return (
    <div className="card">      {/* class 대신 className */}
      <h2>{title}</h2>          {/* {} 안에 JS 표현식 */}
      <p>내용입니다.</p>
    </div>
  );
}

JSX에는 꼭 지켜야 하는 규칙이 몇 가지 있습니다.

• HTML의 class 는 className, for 는 htmlFor 로 씁니다. (JS 예약어 충돌 때문)
• 중괄호 {} 안에는 JS 표현식만 들어갑니다. if 문 같은 명령문은 못 넣어요.
• 모든 태그는 닫아야 합니다. <img />, <br /> 처럼 셀프 클로징도 필수.

fragment — 불필요한 div 줄이기

컴포넌트는 하나의 부모 요소만 반환할 수 있습니다. 여러 요소를 감싸고 싶은데 div 를 더 만들기 싫다면 fragment 를 씁니다.

function Info() {
  return (
    <>                  {/* fragment: 빈 태그 */}
      <h2>제목</h2>
      <p>본문</p>
    </>
  );
}

⚠️ 주의 — <>...</> 는 화면에 아무 태그도 만들지 않습니다. 하지만 key 가 필요한 리스트에서는 <Fragment key={...}> 형태로 명시적으로 써야 합니다.

리스트 렌더링

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

• 배열을 map 으로 돌려 JSX 배열을 만들면 React가 순서대로 그려 줍니다.
• 각 항목에는 고유한 key 를 반드시 줘야 합니다. React가 변경을 효율적으로 추적합니다.

⚠️ 주의 — key 로 배열 인덱스(index)를 쓰는 건 항목 순서가 절대 바뀌지 않을 때만 안전합니다. 가능하면 item.id 처럼 고유 ID를 쓰세요.

요약

• React는 UI를 컴포넌트 단위로 나눠 조립한다.
• 컴포넌트는 대문자로 시작하고, props 로 값을 받는다.
• JSX는 className, 중괄호 표현식, 태그 닫기, 단일 부모 규칙을 따른다.
• 여러 요소는 fragment(<>...</>) 로 감싼다.
• 리스트는 map + 고유한 key 로 그린다.

연습문제

1. name 과 emoji 두 props를 받아 <p>👋 안녕, 민수</p> 처럼 출력하는 Greeting 컴포넌트를 만들어 보세요.
2. 다음 코드의 잘못된 점 2가지를 찾아 고치세요: <div class="box"><h1>제목</h1><p>글</p>
3. 문자열 배열 ['사과', '바나나', '포도'] 를 <ul> 리스트로 렌더링하는 컴포넌트를 작성하세요.
4. 헤더와 푸터 두 요소를 div 없이 반환하도록 fragment를 사용해 보세요.

힌트 — 2번은 class 와 닫히지 않은 태그를 살펴보세요. 3번에서 고유 ID가 없다면 인덱스를 key 로 쓰되 한계를 떠올려 보세요.