TOC
- 검색기능 구현을 위해 알아야 할 함수
- algorithm
1. 검색기능 구현을 위해 알아야 할 함수
1. Array.filter
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
filter 함수는 배열을 순회하며 callback 함수에 인자를 대입해 callback 함수의 return 값이 true인 경우
배열을 만들어 해당 callback 함수에서 true로 걸러진 값을 모아 배열을 반환해준다.
2. Array.includes
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false배열에 includes의 파라미터와 비교해 값이 같은 경우 true 틀리면 false 값을 반환한다.
3. String.prototype.toLowerCase()
문자열을 소문자로 변환해 반환합니다.
2. algorithm
-
input태그의 onChange props를 통해 state.search를 받는다. (search의 기본 값은 null이다.)
-
외부 파일로부터 유저의 값을 받아와 배열에 삽입해 state.users를 초기화한다.
-
search=null인 경우 users 전체를 반환해 users의 목록이 나오게 하고, search!=null인 경우
user의 이름.toLowerCase().includes(search.toLowerCase());
를 해준다
이는 user의 소문자 이름이 search의 소문자를 포함하고 있는 경우 true를 반환하고 이 true는 user의 소문자 이름이 search의 소문자 이름을 전부가 아닌 일부만 포함하더라도 filter의 배열에 포함되게 끔 해준다.
총총
Array.filter는 true가 나온 모든 요소를 다시 배열로 반환시켜 준다는 것을 활용해 filter의 callback 함수의 반환 값으로써 다시 callback 함수를 호출해 includes를 활용할 수 있다.
조심해야 할 것은 이는 callback 지옥의 입구라는 점이다.
이 코드가 난해한 것은 callback의 return으로 다시 callback을 불러주었기 때문이다. 코드 양이 좀 늘어나더라도 굳이 callback을 또 만들어 줄 필요는 없어보인다.
말이 나온김에 바로 수정해 보았다. callback의 반환으로 callback을 리턴하지 말자 어질어질 해진다.
