[Main] Filter 함수에 대한 정리!

안녕하세요. 오늘은 Filter함수에 대한 내용을 정리하보려고 합니다.

 

filter method는 JavaScript에서 배열의 원소들을 조건에 따라 걸러내는 메서드입니다.

 

 

filter method는 콜백 함수를 파라미터로 받습니다.

콜백 함수는 배열의 각 원소에 대해 실행되며, true를 반환하면 해당 원소를 새로운 배열에 넣고, false를 반환하면 건너뜁니다. filter method는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.

 

react에서는 filter method를 사용하여 컴포넌트의 상태나 props로 전달받은 배열을 필터링할 수 있습니다.

 

예를 들어, 할 일 목록을 보여주는 컴포넌트가 있다고 가정해 봅시다.

이 컴포넌트는 상태로 todos라는 배열을 가지고 있습니다. todos 배열의 각 원소는 객체로, id와 text, done이라는 프로퍼티를 가지고 있습니다. done은 할 일의 완료 여부를 나타내는 불리언 값입니다.

 

이 컴포넌트에서는 filter method를 사용하여 완료된 할 일만 보여주거나, 완료되지 않은 할 일만 보여주거나, 모든 할 일을 보여주는 기능을 구현할 수 있습니다.

예를 들어, 완료된 할 일만 보여주려면 다음과 같이 작성할 수 있습니다.

import React, { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: "밥 먹기", done: true },
    { id: 2, text: "코딩하기", done: false },
    { id: 3, text: "잠자기", done: false },
  ]);

  const [filter, setFilter] = useState("all"); // 필터링 조건을 상태로 관리

  const handleFilterChange = (e) => {
    // 필터링 조건을 변경하는 함수
    setFilter(e.target.value);
  };

  const filteredTodos = todos.filter((todo) => {
    // filter method를 사용하여 조건에 맞는 할 일만 새로운 배열로 만듦
    if (filter === "all") return true; // 모든 할 일을 보여줌
    if (filter === "done") return todo.done; // 완료된 할 일만 보여줌
    if (filter === "undone") return !todo.done; // 완료되지 않은 할 일만 보여줌
  });

  return (
    <div>
      <h1>할 일 목록</h1>
      <select value={filter} onChange={handleFilterChange}>
        {/* 셀렉트 박스로 필터링 조건을 선택할 수 있게 함 */}
        <option value="all">모두</option>
        <option value="done">완료</option>
        <option value="undone">미완료</option>
      </select>
      <ul>
        {filteredTodos.map((todo) => (
          // 필터링된 배열을 매핑하여 리스트 아이템으로 만듦
          <li key={todo.id}>
            {todo.text} - {todo.done ? "완료" : "미완료"}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

 

 

이렇게 하면 filter method를 사용하여 react에서 배열을 필터링하는 방법을 알 수 있습니다.

 

오늘도 긴 글 읽어주셔서 감사합니다 ^^

-현고미 올림-