6.4.3 데이터 제거 기능 구현하기

이번에는 각 항목을 더블클릭했을 때 해당 항목이 화면에서 사라지는 기능을 구현해 보겠습니다. 이번에도 마찬가지로 불변성을 유지하면서 업데이트해 주어야 합니다. 불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용합니다.

filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류할 수 있습니다. 사용 예시를 한번 확인해 볼까요?

const numbers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter(number => number > 3);
// 결과: [4, 5, 6]

filter 함수의 인자에 분류하고 싶은 조건을 반환하는 함수를 넣어 주면 쉽게 분류할 수 있습니다.

이 filter 함수를 응용하여 특정 배열에서 특정 원소만 제외시킬 수도 있습니다. 예를 들어 위 코드에서 본 numbers 배열에서 3만 없애고 싶다면 다음과 같이 하면 됩니다.

const numbers = [1, 2, 3, 4, 5, 6];
const withoutThree = numbers.filter(number => number != = 3);
// 결과: [1, 2, 4, 5, 6]