[React.js] Filter 검색

React.js에서 검색을 할 때 버튼을 두지 않고 text-field에 검색어를 치면 바로 필터링이 되는 기능을 구현해보기로 했다.

1. search query state

먼저 검색하려는 단어를 state변수로 생성한다.

const [searchQuery, setSearchQuery] = useState("");

2. input text

text-field를 만들고 onChange 메소드를 연결하여 위에 state변수를 set해준다.

function A(){
  const onChangeSearchQuery = (e) => {
    setSearchQuery(e.target.value);
  };
  return(
      <input type="text"
		placeholder="Search by title"
		onChange={onChangeSearchQuery}/>
   )
}

3. filter data

서버에서 가져온 데이터를 state변수인 searchQuery를 이용하여 filter로 새로운 리스트를 생성한다.

const filterData = () => {
	if (searchQuery === "") {
      return dataList;
    }
    return dataList.filter((data) =>
		data.title.toLowerCase().includes(searchQuery.toLowerCase())
	);
};

4. map

위에서 filter로 만든 새로운 리스트를 map을 사용하여 사용자 뷰에 뿌려준다.

{
  filterData() && filterData().map((data, index) => (
	<li key={index}>
		{board.title}
	</li>))
}

전체 소스

function A() {
  const [searchQuery, setSearchQuery] = useState("");
  const onChangeSearchQuery = (e) => {
    setSearchQuery(e.target.value);
  };
  const filterData = () => {
	if (searchQuery === "") {
      return dataList;
    }
    return dataList.filter((data) =>
		data.title.toLowerCase().includes(searchQuery.toLowerCase())
		);
	};
  
  return(
    ...
	<input type="text"
		placeholder="Search by title"
		onChange={onChangeSearchQuery}/>
	<ul>
	{filterData() && filterData().map((data, index) => (
		<li key={index}>
			{board.title}
		</li>))
	}
	</ul>
	...
   )
}