한국어

유럽

아시아

← 레벨 3 – 마스터

수업 4/10 ⏱ 35 분 프리미엄

구성 요소: 웹용 구축 키트

첫 번째 맞춤형 구성 요소를 만들고 LEGO처럼 페이지를 조립해 보세요.

보여줄게: 첫 번째 맞춤 구성요소

컴포넌트는 JSX를 반환하는 첫 글자가 대문자인 함수야. 각 파일을 자체 파일에 저장하는 것이 일반적야. 파일 만들기src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

그리고 그것을 사용하해src/App.jsx:

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

레벨 1의 고통을 기억하십니까? 모든 페이지에 메뉴가 복사되어 있어?? 방금 사라졌어. 헤더는 한 파일에 한 번 존재해.

보여줄게: 교체 가능한 데이터가 있는 구성 요소(소품)

교체 가능한 문자가 포함된 스탬프 - 데이터가 props(속성)로 구성 요소에 전달돼. 파일src/PlayerCard.jsx:

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

다음에서 사용됨App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Prop은 HTML 속성처럼 작성돼. 텍스트는 따옴표 안에 들어가고, 숫자와 JavaScript는 들어갑니다.{}. 구성요소는 이를 압축 해제해.({ name, position, number })그리고 그것들을 사용해.

보여줄게: 배열의 목록

세 장의 카드를 손으로 – 괜찮어. 하지만 20명이 있다면 어떨까요? 데이터를 배열에 넣고 를 사용하해..map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map()배열을 살펴보고 모든 항목에 대한 카드를 만듭니다. 플레이어 추가 = 배열에 행 추가. HTML은 복사되지 않어. (key단지 React가 카드를 구분하는 도우미일 뿐야. 거기에 독특한 것을 넣으세요.)

네 차례 💪

React 프로젝트에서 자신의 프로젝트를 위한 컴포넌트 키트를 빌드해.

  1. 가Header웹사이트 이름과 메뉴가 포함된 구성요소야.
  2. 프로젝트에 맞는 소품이 포함된 카드 구성 요소: 🏫TeacherCard(이름, 제목) · 🙋HobbyCard(이름, 설명) · 🌍TripCard(장소, 설명) · ⚽PlayerCard(이름, 직위, 번호).
  3. 데이터를 배열에 넣고 렌더링해..map()– 최소 4개 항목.
  4. 이전 웹사이트의 카드 스타일을src/App.css– 네 CSS 지식은 변함없이 이어집니다!
✅
**직접 확인해:** 페이지는 네 태그로 구성되어 있어(<헤더 />,<플레이어카드 />...) 카드는 데이터 배열에서 생성되며 배열에 항목을 추가하면 페이지에 카드가 추가돼. 이것이 바로 실제 애플리케이션이 구축되는 방식야.

이번 수업에서 배울 점

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관