4월, 2025의 게시물 표시

[JS] map, filter

🔹 기본 개념 정리 map : 배열의 각 요소를 변형하여 새로운 배열을 반환 filter : 조건을 만족하는 요소만 남겨 새로운 배열을 반환 🟢 React에서 map 활용 예제 ✅ 리스트 렌더링 import React from "react"; const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"]; function FruitList() { return ( {fruits.map((fruit, index) => ( {fruit} ))} ); } export default FruitList; 📌 설명 : map 을 사용해 fruits 배열의 데이터를 <li> 태그로 변환하여 렌더링함. ✅ 객체 배열에서 map 사용 const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" }, ]; function UserList() { return ( {users.map((user) => ( {user.name} ))} ); } export default UserList; 📌 설명 : key 속성은 React에서 필수이며, id 를 키 값으로 사용. 🔵 React에서 filter 활용 예제 ✅ 특정 조건의 데이터만 필터링 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function EvenNumbers() { const evenNumbers = numbers.filter((num) => num % 2 === 0); r...