필터링 후 Map 사용하기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 37번째.
배열 메서드는 체이닝이 가능하며, map 전에 filter를 사용하면 원하는 항목만 렌더링할 수 있습니다:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// 렌더링: 2, 4, 6filter는 조건이 참인 항목을 유지합니다. map은 살아남은 항목을 엘리먼트로 변환합니다. 검색 결과, 읽지 않은 메시지, 완료된 할 일 목록 등 웹의 모든 "…만 보기" 기능은 이 체인으로 이루어집니다.
챌린지
중급상점의 저렴한 품목만 표시하세요.
<ul id="cheap-list">내부에 10 미만인 배열의 가격마다<li>를 하나씩 렌더링하세요. 먼저 filter를 한 다음 map을 사용하세요.- 각
<li>는 가격을 표시하며 그 가격을 key로 사용합니다.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.