상품 검색 기능
상품 검색 기능
상품검색 기능을 테스트할 수 있도록 몇개의 상품정보를 먼저 작성하신 후 테스트하시기 바랍니다.
1. ListProduct.js (React)
파일 위치: c:/react/frontend/src/components/ListProduct.js
import React, { useRef, useEffect, useState } from 'react';
import './main.css';
import { useNavigate } from 'react-router';
import ProductItem from './ProductItem';
function ListProduct() {
const navigate = useNavigate();
const [items, setProductList] = useState([]);
const product_name = useRef();
function getList(url) {
fetch(url)
.then(response => { return response.json(); })
.then(data => { setProductList(data); });
}
useEffect(() => { getList('/list'); }, []);
return (
<>
<h2>상품목록</h2>
상품명: <input name='product_name' ref={product_name} />
<button type='button' onClick={() => {
getList(`/list?product_name=${product_name.current.value}`)
}}>조회</button>
<br /><br />
<button onClick={() => navigate('/write')}>상품등록</button>
<hr />
등록된 상품수: {items.length}
<br /><br />
[생략]
</>
);
};
export default ListProduct;
[해설]
상품이름을 입력하고 조회 버튼을 누르면 서버에 보냅니다.
http://localhost/list 로 자료를 보내게 됩니다.
`/list?product_name=${product_name.current.value}`
url?변수=값 형식으로 url 뒤에 값을 붙여서 보내게 됩니다.
`` 역따옴표 내부에는 문자열과 변수를 혼합하여 작성할 수 있습니다. 이때 변수 앞에는 $를 붙여야 합니다.
`문자열 ${변수}`
2. product.xml (Spring Boot)
검색을 하려면 상품 이름을 전달해야 하므로 변경 사항이 있습니다. 빨간색 부분을 추가하면 됩니다.
파일 위치: src/main/resources/mappers/product.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="product">
<select id="list" resultType="java.util.Map">
select * from product
where product_name like #{product_name}
order by product_name
</select>
</mapper>
[해설]
<select id="list" resultType="java.util.Map" parameterType="String">
dao에서 보낸 product_name 값을 받을 변수의 자료형이 parameterType에 지정됩니다. 여기서는 값이 하나이므로 String만 지정했습니다. 값이 2개 이상일 때는 Map이 되겠습니다. parameterType은 생략해도 됩니다.
select 명령어의 형식은 아래와 같습니다.
select 필드
from 테이블
where 검색할 레코드의 조건
여기서는 상품이름으로 검색을 하게 됩니다.
where product_name like #{product_name}
예를 들어 사과 라면
where product_name = "사과"
라고 하면 됩니다.
여기서는 = 대신 like을 사용했습니다.
like을 사용하게 되면 키워드 검색도 가능하게 됩니다.
where product_name like "%사과%"
라고 한다면
상품 이름이 정확히 "사과" 가 아닌 "풋사과", "맛잇는 사과", "사과쥬스" 등 사과라는 키워드가 포함된 모든 상품 이름들을 찾을 수 있습니다.
3. ProductDAO.java (Spring Boot)
검색을 하려면 상품 이름을 전달해야 하므로 변경 사항이 있습니다. 빨간색 부분을 추가하면 됩니다.
파일위치: src/main/java/com/example/product/ProductDAO.java
package com.example.product;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
@Repository
public class ProductDAO {
@Autowired
SqlSession sqlSession;
public List<Map<String, Object>> list(String product_name) {
return sqlSession.selectList("product.list", "%" + product_name + "%");
}
}
[해설]
public List<Map<String, Object>> list(String product_name) {
return sqlSession.selectList("product.list", "%" + product_name + "%");
}
Controller에서 보낸 상품이름이 product_name 변수에 저장됩니다.
상품이름을 전달하여 해당되는 상품의 리스트를 리턴합니다. 상품이름이 빈값일 경우 모든 상품들을 리턴하게 됩니다.
4. ProductController.java (Spring Boot)
검색을 하려면 상품 이름을 전달해야 하므로 변경 사항이 있습니다. 빨간색 부분을 추가하면 됩니다.
파일위치: src/main/java/com/example/product/ProductController.java
[생략]
@RestController
public class ProductController {
[생략]
@RequestMapping("/list")
public List<Map<String, Object>> list(@RequestParam(defaultValue = "") String product_name) {
return productDao.list(product_name);
}
}
[해설]
ListProduct.js 에서 입력한 상품이름이 list() method로 넘어오게 됩니다.
@RequestMapping("/list")
public List<Map<String, Object>> list(@RequestParam(defaultValue="") String product_name) {
@RequestParam 어노테이션이 붙은 변수는 get 방식 또는 post 방식으로 전달된 값들을 저장하는 용도의 변수입니다. defaultValue는 전달된 값이 없을 경우 기본값으로 사용할 값입니다.
return productDao.list(product_name);
그 상품이름을 다시 dao에 전달합니다.
5. 상품 검색 실행 결과 확인
상품명에 상품이름을 입력하고 [조회] 버튼을 누르면 해당되는 상품목록을 검색하여 화면에 출력합니다.