Menu

Tech

학습 시작하기

한국어

2단계: Props를 활용한 카드

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 40번째.

챌린지

쉬움

카드 구성 요소를 재사용 가능하게 만드세요.

name 및 bio props를 전달받고, 전달받은 prop 값으로 1단계와 동일한 구조(card div, id="profile-name", id="profile-bio")를 렌더링하는 ProfileCard를 정의하세요.
App에서 name이 Grace Hopper이고 bio가 Invented the compiler인 ProfileCard 하나를 렌더링하세요.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

기초 (Fundamentals)의 모든 레슨

1React 소개

React란 무엇인가요?첫 번째 컴포넌트 단일 부모 규칙 JSX는 HTML이 아닙니다 요약: React 소개

4Props

Props란 무엇인가요?Props 전달하기 두 개의 Props 같은 컴포넌트, 새로운 데이터 Children Prop 요약: Props

7조건문 및 리스트

삼항 연산자 렌더링 &&로 보여주기 리스트 렌더링하기 Key의 중요성 필터링 후 Map 사용하기 요약: 조건문 및 리스트

2JSX 표현식

중괄호 사용하기 중괄호 안의 연산 속성에서의 중괄호 사용 JSX에서 함수 호출하기 요약: JSX 표현식

5상태와 이벤트

상태(State)란 무엇인가요?클릭 카운터 단계별로 세기 상태로 토글하기 독립적인 상태 요약: 상태와 이벤트

8프로젝트: 프로필 카드

1단계: 카드 구조2단계: Props를 활용한 카드3단계: 좋아요 버튼 4단계: 팔로우 토글

3컴포넌트

기본 구성 요소 두 번째 컴포넌트 만들기 컴포넌트 재사용하기 페이지 구성하기 요약: 컴포넌트

6폼과 입력

제어 컴포넌트 입력 입력값 출력하기 글자 수 카운터 지우기 버튼 요약: 폼과 입력