요약: 조건문 및 리스트

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

챌린지

중급

단원 요약: 이번 단원에서 배운 모든 내용을 사용하여 데이터로부터 작업 보드를 만드세요.

컴포넌트는 tasks 배열을 정의합니다. <ul id="done-list"> 내부에서 완료(done)된 작업당 하나의 <li>를 렌더링하세요: 먼저 filter한 후, map을 사용합니다.
각 <li>는 작업의 text를 표시하고 id를 key로 사용합니다.
목록 위에는 &&를 사용하여 2 done이라는 텍스트가 적힌 id="badge" 속성의 <span>을 렌더링하지만(숫자는 필터링된 배열의 length를 이용해 만드세요!), 완료된 작업이 최소 하나 이상 있을 때만 렌더링해야 합니다.

직접 해보기

<!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>