filter 함수

자바스크립트의 filter 함수 사용법

filter 함수를 이용해서 쉽게 sorting 하는 법을 알아보자.

이곳에서 filter 함수에 대해서 알아 볼 수 있다.

import React, { useState } from "react";

const Arr = [
  {
    name: "1이름입니다.",
    status: "Start",
    text: "내용 입니다. 내용 입니다. 내용 입니다. 내용 입니다.",
  },
  {
    name: "2이름입니다.",
    status: "End",
    text: "내용 입니다. 내용 입니다. 내용 입니다. 내용 입니다.",
  },
  {
    name: "3이름입니다.",
    status: "End",
    text: "내용 입니다. 내용 입니다. 내용 입니다. 내용 입니다.",
  },
  {
    name: "4이름입니다.",
    status: "Start",
    text: "내용 입니다. 내용 입니다. 내용 입니다. 내용 입니다.",
  },
];

const Study = () => {
  const [sortingTrigger, setSortingTrigger] = useState(null);
  let sorting = Arr.filter((item) => {
    if (item.status === sortingTrigger) {
      return item;
    } else if (!sortingTrigger) {
      return true;
    }
  });
  console.log(sorting);
  return (
    <div>
      <button
        onClick={() =>
          setSortingTrigger(sortingTrigger === "End" ? "Start" : "End")
        }
      >
        솔팅
      </button>
      {sorting.map((item, idx) => (
        <div key={idx}>{item.name}</div>
      ))}
    </div>
  );
};

export default Study;

let sorting 부분을 살펴보면, 정의한 Arr 에 필터를 걸게 된다. 각각의 배열을 item 이라 부르고, 그 item에 대해서 어떤 조건을 걸어주냐 하면 첫번째 if문을 보면 item.status 와 sortingTrigger와 같으면 즉, "End" 혹은"Start"로 같게 되면 해당하는 배열 item을 내보내겠다는 것이고, else if로 sortingTrigger가 null 값이라면 true를 return 하여 전체 값 즉, Arr 전체를 내보내겠다는 것이다.

그리고, let sorting 으로 정의된 뒤에, 하단에서 map 함수를 이용해 해당하는 배열만 이용해서 그린다는 뜻이다.

filter 함수를 이용해서 조건에 부합하는 배열만 추출할 때 용이하게 사용할 수 있다.