Javascript filter 메소드를 이용한 데이터 핸들링

filter() 메서드 : 자바스크립트 배열의 내장 함수

주어진 함수의 테스트를 통과하는 모든 요소를 모아(true면 요소를 유지, false면 버림) 새로운 배열로 반환 함. callback 함수는 호출되는 배열을 변화시키지 않음.

callback 함수는 3개의 인수와 함께 호출됨.

1. 처리할 현재(대상) 요소값
2. 처리할 현재(대상) 요소의 인덱스
3. filter을 호출한 배열 객체(=순회되는 배열 객체)

filter((el, index, arr))

기본 사용법

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
// filter 안의 word는 words를 뜻한다.
// words 객체의 길이가 아니라 객체의 하나하나 요소의 길이를 비교한다.
// spray.length > 6 --> limit.length > 6

console.log(result);
// ["exuberant", "destruction", "present"]
// true인 것만 반환하고 false인 것을 버린다.

filter()을 이용한 검색 예시

const sortedMonsters = monsters.filter(monster =>
    monster.name.toLowerCase().includes(userInput)
);
// userInput은 상태값이다. 유저가 입력한 값을 반영하는 용도로 쓰인다.
// 유저가 입력한 ''를 포함하는 요소만 반환한다.
// 아무것도 입력하지 않으면 모두 반환한다.

<Card data={sortedMonsters} />
// filter() 메서드를 사용해서 반환된 data를 렌더링 한다.

filter()을 활용한 삭제 예시

const deleteMonsters = (id) => {
    const newMonsters = monsters.filter((monster) => monster.id !== id);
    setMonsters(newMonsters);
}

// 여기서 id는 유저가 클릭한 게시글의 id를 말합니다.
// onClick 이벤트를 통해 활용