🔍 검색 기능 구현

🤔 게시판 DB로 파이어베이스를 쓰고 있었는데, 파이어베이스가 문장 검색이 안되는..? 이슈가 있어서(잘 모르겠다) 서버단에서 검색하는 건 포기했고, 프론트단에서 boardList는 끌어올 수 있으니까 여기서 단어를 필터로 걸러서 그결과만 보여주겠다... 는 계획을 세웠다
🧏‍♀️ 요약: 야매로 검색하기

// 게시판 컴포넌트
// 상위 컴포넌트에서 Search_bar 컴포넌트 호출
<Search_bar onSearch={getSearchBoardList} />

// getSearchBoardList 함수 정의
const getSearchBoardList = (search) => {
 
  // 검색어를 사용하여 boardList 필터링
    const filterList = boardList.filter((p) => {
        return p.major.includes(search) || p.title.includes(search) || p.info.includes(search);
    });
    // 필터링된 결과를 boardList에 설정
    setBoardList(filterList);
}

// 하위 컴포넌트 Search_bar
function Search_bar({onSearch}) {
    const [search, setSearch]=useState("");
    const handleSearch=()=>{
        onSearch(search);
    }
    const handleChange=(e)=>{
        setSearch(e.target.value);
    }
    return (
        <Div>
            <Form>
                <Input type="text" value={search} onChange={handleChange}/>
            </Form>
            <Button onClick={handleSearch}>검색</Button>
        </Div>
    );
    
}

• onSearch 프롭을 통해 Search_bar 컴포넌트에게 getSearchBoardList 함수를 전달
  이렇게 하면 검색 바에서 검색 버튼이 클릭될 때 getSearchBoardList 함수가 호출되며, 검색어가 전달되어 boardList를 필터링하고 업데이트함
• 결론 ➡ Search_bar에서 입력된 검색어는 onSearch 함수를 통해 getSearchBoardList 함수의 search 매개변수로 전달되어 boardList를 필터링함

---

📖 기록

사실 아직도 콜백함수라는 게 어렵다 ㅎ 더 찾아봐야지