$$config title: Web-Project 검색창 구현 keywords: - React - SQL $$ # 검색바를 구현해보자! - 쇼핑몰에서 원하는 옷을 찾을 수 있는 검색 페이지나 검색바가 있는 것을 보고 이걸 구현해야 겠다라는 생각을 했다 - 내가 원하는 모습은 `검색창에 아이템의 이름만 입력했을 때 그 아이템만 나오게 하는 것` 이었다. - 현재 구현이 완료가 되었고 넘기는 값에서 영어 이름만 추가로 출력되도록 수정해주면 될것 같다. ## 검색바 코드 ```js const [arrSearch, setArrSearch] = useState([]); const [search, setSearch] = useState(""); const onChange = (e) => { e.preventDefault(); console.log(e.target.value); setSearch(e.target.value); }; const onCheckEnter = (e) => { if (e.key === "Enter") { } }; useEffect(() => { const getData = async () => { const data = await axios({ url: `http://localhost:4000/SearchPage`, method: "POST", data: { search, }, }); setArrSearch(data.data); // console.log("avbs", arrSearch); }; getData(); }, [search]); ``` ## 검색바 부분 추가 설명 - 위에서 차례대로 설명하자면 빈 배열 하나를 만들어 주고 인풋창에 들어갈 `String`타입이 들어갈 수 있는 변수 하나를 선언해주고 - 그 아래 `onChange`는 `input`창에 입력이 된 값을 받아오는 것이다. - 그 아래 `onCheckEnter`는 엔터를 눌렀을 때 값이 넘어가도록 만들어 준것이다. - 그 아래 `useEffect`는 `onChange`에서 받아오는 값을 sql에 보내주어 그 값을 가져오는 역할을 해주는 것이다. ## HTML 부분 ```js return (

; })}

); ``` ## HTML부분 추가 설명 - map 함수를 사용해서 리스트 아이템 들을 구현하려고 값을 넘겨줘서 그 넘겨준 값을 `SearchListItem`에서 사용해 줄 수 있게 넣어준다. ## SearchItemList 내의 코드 ```js const SearchListItem = ({ arrSearch }) => { return (

{arrSearch.prdName}

{arrSearch.prdEName}

{" "} {arrSearch.prdPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}

); }; ``` ## 추가 설명 - `arrSearch`의 배열을 받아오고 기존에 `GDPAGE`에서 사용했던 `li`부분을 가져와서 `search`값을 가지고 조회를 해서 그 검색을 하는 `express`에 보내준다. - 기존에 `Link`엘리먼트에 정해놓은 아이디 값을 강제로 넣었다면 이번 검색창에선 배열의 아이디 값을 그대로 가져와서 넘기는 것으로해서 바로 상품 상세페이지로 넘아가게 되었다. ## express 코드 ```js app.post("/SearchPage", async (req, res) => { const { body: { search }, } = req; var like = "%" + search + "%"; const [prdLow] = await pool.query( ` SELECT * FROM product WHERE prdName LIKE ?; `, [like] ); console.log(prdLow); if (search) { res.json(prdLow); } }); ``` ## express 추가 설명 - 아래에서는 이제 sql 곧 데이터베이스에 요구를 하는 조건들이다. `search`라는 값을 받아와서 조회를 해주는데 `WHERE 컬렁명 LIKE ?`를 해서 ?에는 `search`의 값이 들어가도록 해준다. - `var like = "%" + search + "%"`라고 만들어준 변수이다. 이 변수가 존재하는 이유는 `LIKE` 때문인데 예를 들어 내가 `K`로 시작하는 아이템들을 다 불러와보고 싶어 라고 하면 `K%`로 입력을 해주어서 `K`로 시작하는 모든 값들을 가져 올 수 있다. - 하지만 우리는 검색을 만드는 것이고 우리가 실생활에서 검색창을 이용할 때에도 완벽한 이름을 다 기억하고 검색하는 일은 드물기 때문에 앞 뒤로 `%`를 붙여서 시작하는 것이 아니라 가운데에 들어가도 조회가 되도록 변수를 만들어 준것이다. - 그래서 sql 부분에 `?`에 들어가는 값은 변수인 `like`인 것이다. - 맨 아래 `res.json(prdLow)`부분이 `if`문으로 감싸져 있는데 이 이유는 기존에 검색창을 만들려고 구글링을 해보면 기존의 아이템들이 다 나열이 되어있고 검색창의 값만 갑자기 하나만 생기는 것으로 나오는데. - 아직 완벽한 검색창은 아니지만 이 코드에서는 search에 값이 있으면 곧 input창에 텍스트가 입력이 된다면 그 아이템을 바로바로 찾아주는 그런 역할이다. 그래서 검색페이지에 들어가면 추천 상품을 제외하고 - 다른 상품들은 조회되지 않는 것으로 설정된 사이트들이 많은데 그 자체를 구현한 것이라고 생각하면 될 것 같다. ## 전체 코드 - react SearchPage 코드 ```js const SearchPage = () => { const [arrSearch, setArrSearch] = useState([]); const [search, setSearch] = useState(""); const onChange = (e) => { e.preventDefault(); console.log(e.target.value); setSearch(e.target.value); }; const onCheckEnter = (e) => { if (e.key === "Enter") { } }; useEffect(() => { const getData = async () => { const data = await axios({ url: `http://localhost:4000/SearchPage`, method: "POST", data: { search, }, }); setArrSearch(data.data); // console.log("avbs", arrSearch); }; getData(); }, [search]); return (

{arrSearch.map((arrSearch, index) => { return ; })}

); }; export default SearchPage; ``` - react SearchListItem 부분 ```js const SearchListItem = ({ arrSearch }) => { return (

{arrSearch.prdName}

{arrSearch.prdEName}

{" "} {arrSearch.prdPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}

); }; export default SearchListItem; ``` - express 부분 ```js app.post("/SearchPage", async (req, res) => { const { body: { search }, } = req; var like = "%" + search + "%"; const [prdLow] = await pool.query( ` SELECT * FROM product WHERE prdName LIKE ?; `, [like] ); console.log(prdLow); if (search) { res.json(prdLow); } }); ```