[React] Filter 함수를 이용한 검색기능 만들기

오늘은 React로 필터 기능을 하는 검색창(Search bar)을 만들어봤다.

이전부터 해보고 싶었던 기능인지라 알고 나니 뿌듯했다.

 

공부는 유튜버 'Code Commerce' 님의 'React JS의 검색 필터 - 결과 필터링'이라는 글을 참고했다.

(비교적 최근에 업데이트된 리액트 18 버전 이후의 강의들은 좀처럼 찾아보기 힘든지라 해외 글이나 영상, 공식문서에 의존해야 하기에 조금 힘든 것 같다 ㅜ..)

 

핵심 기능

• array.filter() + array.map()
• onClick event

---

완성본

---

이번 작업 역시 repl.it을 이용

기본 마크업 + 스타일링은 react-bootstrap을 이용했다.

array 자료는 https://www.mockaroo.com/ 를 이용. 자신이 원하는 랜덤객체 및 배열을 원하는 개수만큼 뱉어주는 사이트.

이번 강의를 통해 알게 된 사이트인데 로그인도 필요 없고, 완전 유용한 것 같다.

---

import { useState } from 'react'
import { Table, InputGroup, Form } from 'react-bootstrap'
import { data } from './data.js';
import './App.css';

export default function App() {

  const [search, setSearch] = useState('');
  
  return (
    <div className="App">
      <InputGroup className="mb-3">
        <Form.Control onChange={(e)=>setSearch(e.target.value)} placeholder="Search any user name"/>
      </InputGroup>
      <h1 className='text-center mt-4'>React Search Bar Practice</h1 >
      <Table striped bordered hover variant="dark">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>E-mail</th>
          <th>Gender</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        {
          data.filter((i) => {
            return search.toLowerCase() === '' ? i : i.first_name.toLowerCase().includes(search);
          }).map((item) => {
            return (
              <tr key={item.id}>
                <td>{item.first_name}</td>
                <td>{item.last_name}</td>
                <td>{item.email}</td>
                <td>{item.gender}</td>
                <td>{item.phone}</td>
              </tr>
            )
          })
        }
        
      </tbody>
    </Table>
    </div>
  )
}

React 코드

 

• mockaroo에서 받아 온 데이터를 data.js 파일에 복사 붙여 넣기
• data.js 데이터 import 후 map 함수로 화면에 뿌려주기
• 사용자가 입력한 값 받아오기 => searchbar에 onClick 이벤트 추가, e.target.value 값을 search라는 state에 저장
• 사용자가 입력한 값에 따라 filter함수를 통해 값 걸러내기

{
  data.filter((i) => {
    return search.toLowerCase() === '' ? i : i.first_name.toLowerCase().includes(search);
  }).map((item) => {
    return (
      <tr key={item.id}>
        <td>{item.first_name}</td>
        <td>{item.last_name}</td>
        <td>{item.email}</td>
        <td>{item.gender}</td>
        <td>{item.phone}</td>
      </tr>
    )
  })
}

• data.filter()를 통해 어떠한 값을 걸러낼 것
• 걸러낼 값 => 사용자가 입력한 값을 소문자화 한 값이 ' ' 빈 문자열이라면 ( (search.toLowerCase()) === ' ' )배열 내 모든 아이템을 ( ? i )
• ' ' 빈 문자열이 아니라면 data 배열을 순회하며 각 아이템의 first_name의 값을 소문자화 한 후에 그 값이 search 값에 포함이 되는지 확인 ( : i.first_name.toLowerCase().includes(search) )
• 걸러낼 값을 토대로 map 함수를 통해 화면에 뿌려주기.( .map(item) => ... )

---

이번 프로젝트는 생각한 것보다 로직이 간단해서 의외였다.

반대로 Code Commerce라는 새로운 선생님도 만날 수 있었고, 예전부터 궁금했던 기능을 배울 수 있어서 뿌듯함은 컸다.