lodash.filter()

npm i lodash

이 명령어는 lodash 전체 라이브러리를 설치합니다. lodash는 유틸리티 함수의 모음으로, 배열, 객체, 문자열 등의 다양한 데이터 구조를 다루는 함수들을 제공합니다. 이 전체 라이브러리를 설치하면 모든 함수가 패키지에 포함됩니다. 

//npm install lodash

import _ from 'lodash';

const filtered = _.filter(users, user => _.includes(user.toLowerCase(), query.toLowerCase()));

 

npm i lodash.filter

이 명령어는 lodash 라이브러리의 일부인 filter 함수만을 설치합니다. 이는 lodash에서 제공하는 많은 함수 중 하나인 filter만 독립적으로 설치하는 방법입니다. 따라서, 전체 lodash를 설치하는 것에 비해 설치되는 파일의 크기가 훨씬 작습니다.

// npm i --save lodash.filter
// 2024.05.05 기준  "lodash.filter": "^4.6.0",

// lodash.filter 라이브러리 불러오기
const filter = require('lodash.filter');

// 데이터 예시: 사용자 리스트
const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true },
  { id: 4, name: 'David', active: false }
];

// 조건: active가 true인 사용자만 선택
const activeUsers = filter(users, user => user.active);

console.log(activeUsers);
// 출력: [ { id: 1, name: 'Alice', active: true }, { id: 3, name: 'Charlie', active: true } ]

 

lodash 에는 수백 개의 함수가 들어 있기 때문에 상당히 큰 크기의 패키지가 됩니다. 전체 lodash 라이브러리의 크기는 버전마다 다르지만, 보통 수백 킬로바이트에서 수 메가바이트에 이릅니다. 따라서 필터링 만이 목적이면 일반적으로 몇 킬로바이트 수준인, lodadh.filter 만을 다운 받는 것을 강추 합나다.

lodash.filter를 사용하면 배열이나 객체에서 원하는 조건에 맞는 요소들을 추출할 수 있습니다. 이 함수는 특정 조건에 부합하는 요소들을 찾는 데 유용하며, Array.prototype.filter 함수와 비슷하게 동작합니다.

 

// vite 맵 프로젝트 map.2ok.kr
const handleQueryChange = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    if (query === '') {
      setSelectedItems([]);
    } else {
      const filteredItems = filterLo(SANS, (san)=>( san.sanname === query|| san.province === query))
      setSelectedItems(filteredItems);
    }
 };