리액트에서 filter로 검색 기능 구현하기

리액트 프로젝트에서 검색기능을 구현할 일이 있어서 구글링을 좀 해봤다.

죄다 filter를 쓰고 있길래 filter를 쓰면 되는구나 했는데

정확한 사용 방법을 잘 모르겠어서 좀 더 찾아보았다.

 

filter() 함수는 자바스크립트 내장 함수인데

아래 코드와 같이 사용할 수 있다.

const searched = data.filter((item) =>
    item.roomName.toLowerCase().includes(search)
);

searched에는 검색 결과가 배열로 저장되며

data 변수에는 데이터베이스에서 불러온 데이터가 저장되어 있다.

filter 함수 안에 있는 item은

data 변수에 저장된 배열형 데이터의 각 요소를 순차적으로 담는 변수이다.

 

즉, 서버에서 전달받은 데이터가 아래 코드와 같이 data 변수에 저장되어 있고,

const data = [
      { id: 1, roomName: '방제목1', chatcount: 10 },
      { id: 2, roomName: '방제목2', chatcount: 30 },
      { id: 3, roomName: '방제목3', chatcount: 6 },
      { id: 4, roomName: '방제목4', chatcount: 3 },
      { id: 5, roomName: '방제목5', chatcount: 15 },
]

filter 함수 안에 있는 item에는 아래와 같이 data 변수의 각 요소가 순차적으로담기게 된다.

item =  { id: 1, roomName: '방제목1', chatcount: 10 }
item =  { id: 2, roomName: '방제목1', chatcount: 10 }
item =  { id: 3, roomName: '방제목1', chatcount: 10 }
...

배열형 데이터의 각 요소를 반복반환해주는 map함수랑 좀 비슷하게 굴러가는 것 같지 않은가?

 

아무튼 이렇게 반환받은 item에서 검색할 요소를 지정해준다.

검색할 요소는 key값으로 넣어주면 된다.

아래 코드에서 나는 item 요소에서 roomName을 기준으로 검색을 했다.

item.roomName.toLowerCase().includes(search)

뒤에 붙은 toLowerCase()는 데이터를 모두 소문자로 바꿔주는 함수이다.

그리고  search에 담긴 데이터는 할당할 때

이미 toLowerCase()함수를 이용해 소문자로 바꿔주었다.

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

이후 includes함수를 이용해 검색할 데이터를 넣어주면 searched 변수에

검색 결과가 할당된다.

 

즉, data에 들어있는 데이터가

includes함수에 파라미터로 오는 search에 담긴 데이터와 일치하면

일치하는 데이터만 searched변수에 배열 형태로 할당해준다.

요렇게 검색 기능이 구현 됨