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} />
//넘겨주기
이게 맞는지.. 아직 백단 구현전이라서 테스트는 안 해봐서 모르겠지만 이런 느낌인 것 같다!
아니라면 다시 수정하기.. . .. . .