[Node/React] 쇼핑몰 사이트 만들기 - 09 검색 기능 만들기

9-1.~9-2. 검색 기능 만들기, 검색 기능을 위한 UI 만들기

//SearchFeature.js 생성
import React, { useState } from 'react'
import { Input } from 'antd';

const { Search } = Input;

function SearchFeature(props) {


    return (
        <div>
            <Search
                placeholder="input search text"
                style={{ width: 200 }}
            />
        </div>
    )
}

export default SearchFeature

// 랜딩페이지에 import 하기
import SearchFeature from "./Sections/SearchFeature";

   <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          margin: "1rem auto",
        }}
      >
        <SearchFeature refreshFunction={updateSearchTerm} />
      </div>

9-3. onChange Function 만들기

// 아래 부분 각각에 추가
    const [SearchTerm, setSearchTerm] = useState("")

    const searchHandler = (event) => {
        setSearchTerm(event.currentTarget.value)
        
    }
    // SearchTerm 값이 계속 달라짐
    
           onChange={searchHandler}
  		   value={SearchTerm}

9-4. refreshFunction을 통해 부모컴포넌트에 업데이트

// SearchFeature에 추가
props.refreshFunction(event.currentTarget.value)

// 랜딩페이지에 추가  
<SearchFeature refreshFunction={updateSearchTerm} />
     const updateSearchTerm = (newSearchTerm) => {	setSearchTerm(newSearchTerm);
  }; 

9-5. getProductFunction 작동시키기

  const updateSearchTerm = (newSearchTerm) => {
    let body = {
      skip: 0,
      limit: Limit,
      filters: Filters,
      searchTerm: newSearchTerm,
    };

    setSkip(0);
    setSearchTerm(newSearchTerm);
    getProducts(body);
  };

9-6. 검색 기능을 위해 getProduct route 수정하기

//product.js
  let term = req.body.searchTerm; // 찾는 

if (term) {
    Product.find(findArgs)
      .find({ $text: { $search: term } })
      .populate("writer")
      .sort([[sortBy, order]])
      .skip(skip)
      .limit(limit) // 8개 까지 가져오기
      .exec((err, productInfo) => {
        if (err) return res.status(400).json({ success: false, err });
        return res.status(200).json({
          success: true,
          productInfo,
          postSize: productInfo.length,
        });
      });
  } else {
    Product.find(findArgs)
      .populate("writer")
      .sort([[sortBy, order]])
      .skip(skip)
      .limit(limit)
      .exec((err, productInfo) => {
        if (err) return res.status(400).json({ success: false, err });
        return res.status(200).json({
          success: true,
          productInfo,
          postSize: productInfo.length,
        });
      });
  }
});

// server에 Product.js에 추가
productSchema.index(
  {
    title: "text",
    description: "text",
  },
  {
    weights: {
      title: 5,
      description: 1,
    },
  }
);
//타이틀과 설명을보고 검색을 한다.

india 검색

korea 검색