searchbar 기능 구현

search 를 구현하기 전!

공통 컴포넌트로 쓰기 위해

CardList(글 리스트/자식),NoticeBoard(공지사항/부모),Seachbar(검색/자식)으로 나눠서 구현하려고 했으나 장렬히 실패했다.

일단 리액트에서 props 로 부모가 자식에게 상속해주는 건 쉬우나 자식이 부모에게 주는 건 구현이 어려웠고… 하지말라고 하셨다 …

그래서 NoticeBoard 에서 api 통신 > data 받아오고 parsing 하는 것 까지 구현을 완료했다(?)

Search 기능

const [lists, setLists] = useState([
    {
      id: 1,
      title: "테스트입니다.",
      content: "테스트입니다.",
      date: "2023-04-25",
      author: "홍길동",
      views: 10,
      comments: 3,
      thumbnailUrl: "https://via.placeholder.com/150",
      recommends: 10,
    },
// mockdata

const [filteredLists, setFilteredLists] = useState([]);
// 검색된 list 를 저장하기 위한 함수

  useEffect(() => {
    axios
      .get("/lists")
      .then((response) => {
        setLists(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  const handleSearch = (query) => {
    const filteredLists = lists.filter((list) => {
      const title = list.title.toLowerCase();
      const content = list.content.toLowerCase();
      const author = list.author.toLowerCase();
      return (
        title.includes(query) ||
        content.includes(query) ||
        author.includes(query)
      );
    });
    setFilteredLists(filteredLists);
  };
// Searchbarcm 에서 input 된 값을 전달 받으면 호출되는 함수, 검색 로직

return (
    <NoticeContainer>
      <BoardWrapper>
        <TitleSearchWrap>
          <Title>공지사항</Title>
          <Search>
            <SearchBarcm onSearch={handleSearch} />
          </Search>
        </TitleSearchWrap>
        <CardList lists={filteredLists.length > 0 ? filteredLists : lists} />

//넘겨주기 

이게 맞는지.. 아직 백단 구현전이라서 테스트는 안 해봐서 모르겠지만 이런 느낌인 것 같다!

아니라면 다시 수정하기.. . .. . .