[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);

  return (
    
      {evenNumbers.map((num) => (
        {num}
      ))}
    
  );
}

export default EvenNumbers;

📌 설명: filter를 사용해 짝수만 걸러낸 뒤, map으로 렌더링.

---

🟠 조금 더 응용한 예제

✅ 검색 기능 만들기

import { useState } from "react";

const data = ["Apple", "Banana", "Orange", "Grape", "Pineapple"];

function SearchList() {
  const [query, setQuery] = useState("");

  const filteredData = data.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    
       setQuery(e.target.value)}
      />
      
        {filteredData.map((item) => (
          {item}
        ))}
      
    
  );
}

export default SearchList;

📌 설명: filter를 이용해 입력한 검색어와 일치하는 데이터만 출력.

---

✅ 체크박스로 필터링하기

import { useState } from "react";

const tasks = [
  { id: 1, text: "Buy groceries", completed: true },
  { id: 2, text: "Read a book", completed: false },
  { id: 3, text: "Workout", completed: true },
];

function TaskList() {
  const [showCompleted, setShowCompleted] = useState(false);

  const filteredTasks = tasks.filter((task) =>
    showCompleted ? task.completed : true
  );

  return (
    
      
         setShowCompleted(!showCompleted)}
        />
        Show completed tasks
      
      
        {filteredTasks.map((task) => (
          
            {task.text} {task.completed ? "✅" : "❌"}
          
        ))}
      
    
  );
}

export default TaskList;

📌 설명: 체크박스를 클릭하면 filter를 이용해 완료된 할 일만 표시하도록 함.