Array.filter를 이용해 검색창 구현하기 (연습)

TOC

1. algorithm

2. 실수한 점

3. 한 번 더

1. algorithm

정의

• 검색창에 입력되는 값을 input, DB에서 받아온 값을 users라고 한다.

1. users.map()을 통해 화면을 그릴 경우 DB에서 전해진 값이 바로 화면에 뿌려지게 된다.

2. users.map()에서 바로 input 값에 의한 filtering도 가능할 것이다. 예를 들어 users.filter(...).map(...)
   이는 코드가 너무 길어지므로

3. filter를 따로 분리해 filteredList.map()의 형태로 만들어 주자 filter가 되면 filtered 결과만을 return(!!!중요!!!) 안되면 filter의 반환값으로 넘겨받은 인자를 그대로 돌려준다 (아무것도 filter하지 않는다는 뜻)

(중요)
함수형 component에서 선언한 함수는 렌더링 파트에 들어가게 되면 state에 그냥 접근할 수 없게 된다. 함수 선언시에는 정상적으로 호출이 되지만 render에서는 closer에 막혀 접근이 불가능해지니 인자를 꼭 넘겨주도록 하자

요약:
1. users를 필터링 해준다 =filteredList
2. filteredList.map((v,i)=>({v.id})) 이런 식으로 렌더링 해준다.

2. 실수한 점

1. 따로 선언한 함수의 closer에 막혀 인자의 전달이 안되었던 점

2. if의 return을 선언하지 않고 그냥 반환되길 기다린 점! (생략 하려면 그 조건을 지킬 것)

3. 한 번 더

...
  const filteredList = (users, input) => {
    return users.filter((user) => {
      if (input) {
        return user.name.toLowerCase().includes(input.toLowerCase());
      } else {
        return user;
      }
    });
  };
...

...
        {filteredList(users, input).map((v, i) => (
          <tr>
            <td>{v.id}</td>
            <td>{v.name}</td>
            <td>{v.gender}</td>
          </tr>
        ))}
...

총총

어렵지만 구현하는 것은 해냈을 때 상당한 만족감을 준다.