게시판 검색하기 기능넣기

📔 결과물

두 종류의 검색방법을 배웠다!

1. 검색창에 내용을 치고 검색하기 버튼을 누르면 그때 검색이 되는방법
2. 검색창에 내용을 치자마자 검색이 적용되는 방법

게시판에는 2번째 방법을 적용하기로 했다.

다만 2번째 방법은 검색을 적용하면 매 타이핑마다 결과가 반영되기 때문에 무리가 갈 수 있다.
그래서 Lodash 라이브러리의 Debounce 기능을 사용해서
타이핑이 끝나면 결과가 반영되게 해줘야한다.

💻 코드리뷰

💻 List.container

• Lodash 라이브러리를 import 해준다

import _ from "lodash";

• 검색내용을 담기위한 myKeyword useState를 해주고
  refetch기능을 통해 검색할때마다 데이터를 다시 불러오게 한다.
• _.debounce는 Lodash의 debounce기능을 불러온 것이다.
  debounce 기능을 써서 이용자가 검색내용을 다쓸때까지 기다려준다.
  뒤의 500은 0.5초를 의미한다.
• 검색이 되면 다시 1번째 페이지로 돌아가기위해 setCurrent(1)를 넣어준다.

export default function List() {
  const { data, refetch } = useQuery(FETCH_BOARDS, {
    variables: { page: startPage },
  });
  const [myKeyword, setMyKeyword] = useState("");
  const getDebounce = _.debounce((data) => {
    refetch({ search: data, page: 1 });
    setMyKeyword(data);
    setCurrent(1);
  }, 500);

• onChangeSerch 함수를 선언해준다. 검색창에 쓴 내용이 data안에 들어간다.

  function onChangeSearch(event) {
    getDebounce(event.target.value);
  }

💻 List.presenter

• 검색창에 onChangeSerch를 연결해준다.

<SearchBox
  name="searchTitle"
  type="text"
  placeholder="🔎 제목을 검색해주세요."
  onChange={props.onChangeSearch}
</SearchBox>