[TIL][23.11.16] Ract로 팬레터 앱 만들기 - 3

요약

Ract로 Fan Letter App 만들기 - 3

검색 input을 추가하여 filter 적용하기

---

고민한 내용

 

useSearchParams을 사용하고 url상 파라미터를 넘겨 검색하면서 해당 내용을 보여주고싶었다.

그렇지만 지금 화면상에 보이는 구조상 검색해서 필터링 되서 그때 그때 보여주는게 더 낫겠다 싶다는 생각을 했다.

 

 

1. Main.jsx

 

기본 세팅은 간단했다.useState로 검색되는 값을 검색 될 때마다 필터링해줬다.

 

 // 검색기능
  const [search, setSearch] = useState("");

  const searchHandler = (e) => {
    setSearch(e.target.value.toLowerCase());
  };

 

 

그리고 list 뿌려주는 곳에서 검색된 내용이 이름과 일치하는지를 필터링해줘서 화면에 뿌려줬다. 비교하기 위해서 입력되는 값을 모두 소문자로 바꾼 후 비교했다

{lists
    .filter((item) => item.writedTo === tab)
    .filter((item) => item.nickname.toLowerCase().includes(search))
    .map((item) => {
      return (
        <ListLi

 

---

결과 화면

---

회고

 

ncludes로 찾는데 에러가 나서 jsx 문법 내에선 사용을 못하는건가해서 한참을 찾았는데 전혀 아니였다.

사용 가능한데 왜 안될까?

이유는 역시 사람이다. item.name으로 저장해놓은지 알았는데 item.nickname이었다. item 내에서 name을 찾을 수가 없으니 includes에서 에러가 나는 것이었다.

그리고 useSearchParams을 사용하기 위해서 들어갔던 작업인데 전혀 사용하지 못해서 아쉬웠다. 사용해볼려고 여러시도를 했었는데, 적절치 않아서 아무래도 다른 작업을 할 때 한번 재시도해보는게 좋을거같다.