4단계: 팔로우 토글

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

챌린지

중급

프로필 카드를 완성하세요.

ProfileCard에 불리언 상태 following을 추가하세요 (초기값 false).
클릭 시 해당 상태를 반전시키는 id="follow" 버튼을 추가하세요.
버튼의 레이블은 참일 때 Following, 거짓일 때 Follow입니다.

직접 해보기

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

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