Search.js

import { Map, MapMarker } from "react-kakao-maps-sdk";
import React, { useState, useEffect, useContext } from 'react';
import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
import SearchMap from '../components/SearchMapByKeyword.js'
import { UserContext } from '../Context.js';
import Article from '../components/Article.js';
import axios from 'axios';
axios.defaults.withCredentials = true;
const {kakao} = window;
function Search(props) {

    const [articleList, setArticleList] = useState([])
    const userContext = useContext(UserContext);
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	}	

    const [location, setLocation] = useState({
        keyword: "",
        center: { lat: null, lng: null }
    });

    useEffect(() => {
        const session = userContext.CheckSession()
        .then((response) => {
            if (!response.data) {
                alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
                MoveTo('/login')
            }
            else {
                // requestLoadArticle()
                // .then((response) => {
                //   console.log(response)
                //   setArticleList(response.data)
                // })
            }
		})
		.catch((response)=>{
			console.log("error!:LogOut")
			console.log(response)
		})
      }, []);

      let listItem = [];
      listItem = articleList.map((article)=>{
        return(
          <Article 
          key={article._id}
          data={article}
        ></Article>
        )
      })

      const onSubmit = e => {
        e.preventDefault();
        if (!location.keyword){
            alert("검색대상을지정해주세요");
            return
        }
        requestLoadArticleByKeyword(location.keyword)
        .then((response) => {
          console.log(response)
          setArticleList(response.data)
        })
      };

      return (
        <div style={{display: 'flex'}}>
            <div className="search">
                <h1>검색페이지입니다.</h1>
                <p>무엇을 드시고 싶나요? 어디 계시죠?</p>
                <SearchMap loc={location} setLoc={setLocation}></SearchMap>  

            </div>

            <div className="searchresult">
                <p>선택한 키워드로 검색합니다.</p>
                <form onSubmit={onSubmit} style={{display: 'flex'}}>
                    <input readonly value={location.keyword} type="text"></input>
                    <button type="submit">검색!</button>
                    <button type="button" onClick={()=>{
                        setLocation({
                            keyword: "",
                            center: { lat: null, lng: null }
                        })}}>선택 해제</button>
                </form>
                <h1>검색결과 {listItem.length} 개 확인</h1>
                {listItem}
            </div>      
        </div>
 


    );
}
async function requestLoadArticle() {
	const response = await axios({
	  url: 'http://localhost:8080/article', // 통신할 웹문서
	  method: 'get', // 통신할 방식
	});
	return response;
  }

async function requestLoadArticleByKeyword(keyword) {
	const response = await axios({
	  url: `http://localhost:8080/article/search/${keyword}`, // 통신할 웹문서
	  method: 'get', // 통신할 방식
	});
	return response;
}

export default Search;