게시글 검색기능 추가

검색 입력값 관리하기 위해서 state 추가 및 input태그 사용

 

   const [search, setSearch] = useState("");

 

           

   <div className="search">

   <input

     placeholder="찾고 싶은 내용.."

     type="text"

     value={search}

     onKeyDown={(e) => {

     /* enter 키 코드 13(enter key) 실행시 searchHandler함수 실행 */

      e.keyCode === 13 && SearchHandler();

     }}

    onChange={(e) => {

      setSearch(e.currentTarget.value);

     }}

   />

   <button onClick={SearchHandler}>

     <img src={searchIcon} alt="메인 아이콘" />

   </button>

   </div>

 

 

 

sort 상태 변경시마다 listChange함수 실행

 

   useEffect(() => {

     listChange();

   }, [sort]);

 

 

 

검색 버튼 클릭 시 listChange 함수 실행

 

   const SearchHandler = () => {

     listChange();

   };

 

 

 

listChange 함수에서 server에 보내는 body에 search를 추가해 줍니다.

 

   const listChange = () => {

     let body = {

       sort: sort,

       search: search,

     };

   };

   axios.post("/api/post/list", body).then((res) => {

     console.log(res);

     if (res.data.success) {

       setPostList([...res.data.postList]);

     }

   });

 

 

 

 

server 코드 

정규표현식이란?(Regular Expression: Regex 활용)

정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식

   

   router.post("/list", (req, res) => {

     //자료형 선언

     let sort = {};

   

     if (req.body.sort === "최신글") {

       sort.createdAt = -1;

     } else {

       //인기글

       sort.repleNum = -1;

     }

     //몽고DB에서 doc찾는 방법은 find()

     Post.find({

       //사용자가 검색 입력한 제목이나 내용 둘중 하나만 걸려도 return되게 $or사용

       $or: [

         //post DB에 있는 title, content추적

         //$regex = cient에서 보내온 search 값이 포함 되는 데이터 찾아줍니다.

         { title: { $regex: req.body.search } },

         { content: { $regex: req.body.search } },

       ],

     })

       .populate("author")

       .sort(sort)

       .skip(req.body.skip) // 처음에는 0이라 첫번째 부터 찾고 이후 5번째부터

       .limit(5) //한번에 찾을 doc의 숫자

       .exec()

       .then((doc) => {

         console.log(doc);

         //응답으로 postList: doc로  클라 쪽으로 보냅니다.

         res.status(200).json({ success: true, postList: doc });

       })

       .catch((err) => {

         res.status(400).json({ success: false });

         console.log(err);

       });

   });

 

 

 

 

 

홈에서 게시글 리스트 보여주고

 

 

 

 

 

게시글 내용 테스트 입력후 엔터 시에 테스트를 포함한 게시글만 나타나는 것을 알 수 있습니다.

 

 

 

 

 

 

참조

https://www.mongodb.com/docs/manual/reference/operator/query/regex/

$regex — MongoDB Manual