Ch.11 React 입문 — 컴포넌트 사고방식

JSX와 첫 컴포넌트

JSX 문법의 기본 규칙을 이해하고 작성할 수 있다function 컴포넌트를 선언하고 렌더링할 수 있다props를 사용하여 컴포넌트에 데이터를 전달할 수 있다

HTML처럼 생겼는데 JavaScript다?

React에서 UI를 표현하는 특별한 문법이 있습니다. HTML과 닮았지만 JavaScript의 힘을 가진 JSX!

HTML 같은데 왜 JavaScript 안에 쓸까?

JSX — JavaScript 안에서 HTML 구조를 직관적으로 작성하는 React의 핵심 문법입니다.

article

핵심 내용

JSX는 JavaScript 안에서 HTML처럼 UI를 작성합니다

JSX 필수 규칙 3가지 1. `class` → className (class는 JS 예약어) 2. 이벤트는 camelCase (onclick → onClick) 3. 모든 태그는 닫아야 함 (<img />, <br />, <input />)

컴포넌트는 JSX를 반환하는 단순한 JavaScript 함수입니다

// 1. 가장 기본적인 컴포넌트
function Greeting() {
  return <h1>안녕하세요!</h1>;
}

// 2. 여러 요소를 반환하는 컴포넌트
function ProfileCard() {
  const name = "김리액트";
  const age = 25;

  return (
    <div className="profile-card">
      <h2>{name}</h2>
      <p>{age}세</p>
      <p>React를 공부 중입니다!</p>
    </div>
  );
}

// 3. 화살표 함수 컴포넌트
const Footer = () => {
  return (
    <footer>
      <p>&copy; 2026 My Website</p>
    </footer>
  );
};

컴포넌트 작성 규칙 1. 이름은 반드시 대문자로 시작 (Greeting, Card, Header) 2. JSX를 return 해야 함 3. 여러 줄이면 소괄호 () 로 감싸기 4. 반드시 하나의 루트 요소를 반환

Props는 부모 컴포넌트에서 자식에게 전달하는 데이터입니다

// Props를 받는 컴포넌트
function UserCard({ name, role, isOnline }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>역할: {role}</p>
      <span>{isOnline ? "🟢 온라인" : "⚫ 오프라인"}</span>
    </div>
  );
}

// Props를 전달하여 사용
function App() {
  return (
    <div>
      <UserCard name="김짓" role="학생" isOnline={true} />
      <UserCard name="이리" role="개발자" isOnline={false} />
      <UserCard name="박액" role="디자이너" isOnline={true} />
    </div>
  );
}

부모 컴포넌트: <Card title="React" /> 형태로 props 전달

Props 객체: { title: "React" } 형태의 객체로 전달됨

자식 컴포넌트: 구조 분해로 { title } 받아서 사용

작은 컴포넌트를 조합하면 큰 UI가 만들어집니다

// 작은 컴포넌트들
function Avatar({ src, alt }) {
  return <img className="avatar" src={src} alt={alt} />;
}

function UserInfo({ name, bio }) {
  return (
    <div className="user-info">
      <h3>{name}</h3>
      <p>{bio}</p>
    </div>
  );
}

function FollowButton({ isFollowing }) {
  return (
    <button className={isFollowing ? "following" : "follow"}>
      {isFollowing ? "팔로잉" : "팔로우"}
    </button>
  );
}

// 조합하여 ProfileCard 완성
function ProfileCard({ user }) {
  return (
    <div className="profile-card">
      <Avatar src={user.avatar} alt={user.name} />
      <UserInfo name={user.name} bio={user.bio} />
      <FollowButton isFollowing={user.isFollowing} />
    </div>
  );
}

컴포넌트 트리 개념 App ├── Header │ ├── Logo │ └── Nav ├── ProfileCard │ ├── Avatar │ ├── UserInfo │ └── FollowButton └── Footer → React는 이 트리 구조로 UI를 관리합니다

JSX에서 HTML의 class 속성 대신 사용하는 것은?

React 컴포넌트의 이름은 소문자로 시작해도 된다

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법은 ___ 이다

JSX와 컴포넌트 마스터!

key

핵심 용어

🔄

class → className

JSX에서 class는 JavaScript 예약어이므로 className 사용

🔄

for → htmlFor

<label>의 for 속성은 htmlFor로 변환

⚡

중괄호 {}

JavaScript 표현식을 JSX 안에 넣을 때 사용

📦

하나의 루트 요소

여러 요소를 반환할 때 <div> 또는 <> 로 감싸야 함

edit_note

정리 노트

JSX와 첫 컴포넌트 정리

JSX 규칙

단일 루트: JSX는 반드시 하나의 루트 요소로 감싸야 함 (<> 가능)
중괄호 {}: JSX 안에서 JavaScript 표현식을 삽입할 때 사용
className: HTML의 class 대신 className 사용

컴포넌트와 Props

function 컴포넌트: JSX를 return하는 함수 — 이름은 대문자로 시작
props: 부모 → 자식으로 데이터를 전달하는 매개변수 객체
props.children: 태그 사이에 넣은 내용을 전달받는 특수 prop

★

컴포넌트 = 재사용 가능한 UI 함수, Props = 그 함수에 전달하는 인자입니다.

image

시각 자료

check_circle

핵심 정리

1JSX = JavaScript 안에서 HTML처럼 UI를 작성하는 문법
2컴포넌트 = JSX를 반환하는 함수, 대문자로 시작
3Props = 부모에서 자식으로 데이터를 전달하는 방법

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작