filter()함수

map()함수와 비슷한 작동원리를 가지는 함수이다.
filter()함수는 배열의 요소를 하나씩 조건에 따라 실행하며 필터링하는 함수이다. 필터링된 배열을 반환한다. 각 요소들 중에서 원하는 조건에 맞는 요소들만으로 필터링 된 배열을 생성하기 위해 사용된다.

filter() 함수를 시각화하면 다음과 같다.
[a, B, c, D].filter(소문자) 👉 [a,c]
기본 형식은 아래와 같다.

filter(function (element[, index[, array]]) {
return//조건; 
});
//또는
filter((element[, index[, array]]) => { return/* … */; })
//또는
filter((element[, index[, array]]) => /* … */;)

• element: 현재 처리 중인 배열 요소
• index: 옵션. 현재 처리 중인 배열 요소의 인덱스
• array: 옵션. filter()를 호출한 배열 자체

배열의 요소를 전달 인자로 받고, 결과로 true 또는 false를 반환합니다. true를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 포함되지 않습니다. 한마디로 false인 값을 걸러내서 배열을 만들어준다.

새로운 배열을 반환해주는 것이기 때문에 리액트의 불변성을 지킬 수 있다.

기록된 숫자들 중에서 개별 삭제 기능 구현

이번에는 기록한 숫자들을 개별적으로 버튼을 누르면 그 기록만 삭제할 수 있도록 구현해보자.

index와 _index는 각각 map()과 filter() 함수에서 전달되는 인덱스를 나타낸다.

map()의 index

• 각 배열 요소를 순회하면서 현재 요소와 해당 요소의 인덱스를 함수로 전달한다.
  여기서 사용된 index는 map()이 순회하고 있는 현재 요소의 위치를 나타낸다.

filter()의 _index

• 각 배열 요소를 순회하면서 현재 요소와 해당 요소의 인덱스를 함수로 전달한다.
  _index또한 filter()이 순회하고 있는 현재 요소의 위치를 나타낸다.

---

1. map() 함수는 배열을 순회하며 현재 요소와 해당 인덱스(index)를 가져온다.
   index는 현재 렌더링된 요소의 위치이다.
2. 삭제 버튼 클릭 시, filter()가 호출된다.

• filter()는 배열을 순회하며 각 요소의 _index를 가져온다.
• _index !== index 조건에 따라, 클릭한 버튼의 요소만 제외되고 나머지는 유지된다.

3. 새 배열이 만들어지고, setRecordNum으로 상태를 업데이트하여 화면이 갱신된다.

*오답노트:

<button onClick={ setRecordNum(recordNum.filter((_, _index) => _index !== index)); }>
        삭제
</button>

이렇게 작성하면 안된다. onClick에 함수가 아니라 함수 호출의 반환값이 전달되었기 때문에 위 코드에서는 setRecordNum함수가 클릭과 상관없이 즉시 실행된다.

적절히 고친 코드

<button onClick={
() => { setRecordNum(recordNum.filter((_, _index) => _index !== index)); }}>
        삭제
</button>

위 코드는 기록한 숫자가 몇 번 숫자인지 디테일과 숫자를 삭제하는 코드를 함수로 뺀 코드이다.