React :: shopping site 만들기 05

 

검색 기능 만들기

 

<input onKeyPress={search} placeholder='제품검색'></input>

 

const search = () => {
    console.log("on key press 확인",search)
}

 

 

글자를 입력할 때 마다 계속 온키프레스가 실행 된다

하지만 엔터를 눌렀을 때만 작동하도록 수정하고 싶다

 

const search = (event) => {
    if (event.key === "Enter"){
        console.log("on key press 확인",search)
    }
}

이제 엔터가 눌러졌을 때만 실행이 된다

 

 

input 안의 검색어 내용을 불러오고 싶을 때는 event.target.value 을 사용한다

(이벤트 안에 값이 있기 때문에)

 

const search = (event) => {
    if (event.key === "Enter"){
        let keyword = event.target.value
        console.log("on key press 확인",keyword)
    }
}

 

입력한 키워드들이 출력 된다

 

 

 

검색한 키워드로 url 바꿔주기

navigate(`/?q=${keyword}`)

검색한 키워드의 값으로 페이지 이동이 된다

 

 

하지만 url만 바뀌고 페이지 이동은 일어나지 않는다

쿼리에 있는 글자를 읽어와서 검색을 할 수 있게 해야 한다

 

useSearchPrams 를 사용한다

 

쿼리값이 바뀔 때 마다 값을 계속 주시하고 있어야 하기 때문에

 

  useEffect(()=>{
    getProducts()
  },[query])

빈 배열에 query를 넣어준다

검색어가 입력이 될 때 마다 

 

값을 새로 확인할 수 있다

 

 

let url = `http://localhost:3004/products?q=${searchQuery}`

url에 쿼리 값을 동적으로 넣어준다

 

 

ProductAll.js

import React, { useEffect, useState } from 'react'
import ProductCard from '../component/ProductCard';
import {Container, Row, Col} from 'react-bootstrap'
import { useSearchParams } from 'react-router-dom';

const ProductAll = () => {
  const [productList, setProductList] = useState([]);
  const [query, setQuery] = useSearchParams();
  const getProducts = async () => {
    let searchQuery = query.get('q') || '';
    console.log('쿼리 값은?', searchQuery);
    let url = `http://localhost:3004/products?q=${searchQuery}`
    let response = await fetch(url)
    let data = await response.json()
    setProductList(data);
  }
  useEffect(()=>{
    getProducts()
  },[query])

  return (
    <div>
      <Container>
        <Row>
        {productList.map((item) => (
          <Col lg={3}>
            <ProductCard item={item}/>
          </Col>
        ))}
        </Row>
      </Container>
    </div>
  )
}

export default ProductAll

검색어에 해당하는 아이템들이 보여진다

 

 

 

추가 할 부분

css 수정

로그인 페이지 꾸미기

디테일 페이지에서 선택한 사이즈 표시하기