search index 검색기능 react 와 연동하기

[김지우]

선생님의 유익한 강의 정말 감사하게 듣고 있습니다. 하지만 실전은 여전히 힘드네요..

<Form className="d-flex"
onChange={(e)=>{
 e.preventDefault();
검색변경(e.target.value);
 console.log(e.target.value)}}> 
 <FormControl
type="search"
className="me-1"
placeholder="Hochony Shop"
aria-label="Search"
size="sm"
style={{ width: '9rem' }}
/>
 <button className="buttonSearch" type="submit"
>
 <FontAwesomeIcon icon={faMagnifyingGlass} size="lg"/></button>
 </Form>

위와 같이 React bootstrap 에서 Form 컴포넌트를 활용해서 여기에 입력한 값을 [검색, 검색변경] 이란 state로 저장했습니다.
콘솔에도 잘 뜹니다.
이제 버튼을 누르면 그 값을 보내서 그걸 토대로 search를 해야 하는데 여기서 막혔습니다. 
(질문 1. Form 컴포넌트 안에 버튼을 넣었다지만 이 버튼에 submit 기능이 잘 되는 건지도 사실 잘 모르겠습니다.)

질문 2. 그래서 그 값을 mongodb search index를 활용해서 get 요청을 하려는데 아래의 server.js 코드를 어떻게 고쳐야 할지 잘 모르겠습니다.
쿼리문이 아닌데 저렇게 입력하면 안될것 같은 느낌이 듭니다.
(이 부분이 해결되면 App.js에서 axios 로 오브젝트 받아온 뒤 state 변경해서 검색한 걸 띄워주는 건 할 수 있을 것 같습니다!)

app.get('/search', function(요청, 응답){
let 검색조건 = [
 {
$search: {
index: 'titleSearch',
text: {
query: 요청.query.value,
path: ['title', 'content']
 }
 }
 }
 ] 
 db.collection('Data').aggregate(검색조건).toArray(function(에러, 결과){
 console.log(결과);
 응답.json(결과);
 })
})

[codingapple]

리액트에선 폼전송말고 ajax로 서버와 통신하면 됩니다 
버튼누르면 /search로 get요청하는데 url 뒤에 쿼리스트링으로 ?value=검색어 입력해주면 될듯요

[김지우]

그래서 계속 이상하게 리프레쉬가 되었었군요..ㅠㅠ
버튼을 그래서 <Form> 바깥으로 빼고 axios로 get 요청을 해보았더니 
버튼을 누르면 뭔가 요청이 되는 듯 합니다. 
그런데 빈 어레이만 콘솔에 뜨고 화면의 상품목록도 마찬가지로 빈 공간으로 바꿔져서 나옵니다
어디가 잘못된 걸까요?
(윗 질문의 server.js 코드는 그대로 입니다)

<button type="search"
className="me-1 buttonSearch"
size="sm"
style={{ width: '3rem' } }
onClick={() => {
 axios
 .get('/search?value=' + {검색})
 .then((result) => {
 console.log(result.data);
hochony변경([...result.data]);
더보기변경(false);
 })
 .catch(() => {
 console.log("불러오기 실패!");
 });
 }}
>

[codingapple]

{검색}
변수에 중괄호는 없앱시다

[김지우]

넵 성공적으로 해결했습니다! 감사합니다!!

[글쓴이]

글