1단계: 카드 구조

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

챌린지

쉬움

App.jsx에 카드 스켈레톤을 작성하세요:

className="card"를 가진 <div>.
그 안에는 id="profile-name"과 텍스트 Ada Lovelace를 가진 <h2>.
이름 아래에는 id="profile-bio"와 텍스트 First programmer를 가진 <p>.

직접 해보기

<!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폼과 입력

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