야근시렁

react 프로젝트를 할 때 많이 사용되는 로직 중 하나가 검색입니다. 

저도 매번 프로젝트를 할때마다 많이 사용되기 때문에 이참에 따로 정리해서 만들어 두려고 한다. 

이전에 올렸던 filter 라는 함수를 사용해서 구현한 예정이다. 

참고로 filter는 react 문법이 아닌, javascript 문법으로 배열을 다룰 때 사용한다. 

https://jotokkiplayground.com/1

우선 필요한 state는 검색어를 입력하는 searchInput 이 필요합니다. 

이 state 의 값을 기준으로 기존의 배열을 filter를 통해 검색어가 포함된 문자열 기준으로 새롭게 그려진 배열을 filteredItems 안에 담고, 이 filteredItems를 아래 map으로 돌려줄 겁니다.

import React, {useState} from 'react'

function SearchableList() {
  const [searchInput, setSearchInput] = useState('')
  const items = ['사과', '바나나', '체리', '나비', '사자', '독수리', '수박']
  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(searchInput.toLowerCase()),
  )

  return (
    <div>
      <input
        type="text"
        placeholder="검색어를 입력하세요."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  )
}

export default SearchableList

만약 이 데이터가 단순 배열이 아니고 오브젝트 형태이거나, 

검색어와 노출되는 값이 다른경우 그냥 searchInput에 입력되는 검색어를 기준으로 filter를 걸어주고 return 되는 UI 부분에서만 노출되는 값만 rendering 해주면 됩니다~! 

import React, {useState} from 'react'

function SearchableList() {
  const [searchInput, setSearchInput] = useState('')
  const items = [
    {id: '사과', value: "🍎"}, 
    {id: '바나나', value: "🍌"}, 
    {id: '체리', value: "🍒"}, 
    {id: '나비', value: "🦋"}, 
  ]
  const filteredItems = items.filter((item) =>
    item.id.toLowerCase().includes(searchInput.toLowerCase()),
  )

  return (
    <div>
      <input
        type="text"
        placeholder="검색어를 입력하세요."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  )
}

export default SearchableList

참고로 중간에 toLowerCase가 포함되어있는데, 이는 만약 검색해야 할 데이터가 영문인 경우 대소문자에 따라 같은 값을 찾을 수 없기 때문에, 주로 사용합니다. 사실 현재 예시는 한국어이므로 필요 없지만, 나중에 필요할 때 사용하려고 그냥 넣어놓았습니다. 

쉽게 apple 과 Apple을 두 문자열 모두 toLowerCase로 apple, apple 만들어놓고 비교를 하기 위함입니다~

만약 대소문자도 구분하고 싶다면  toLowerCase는 삭제해야 합니다.