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)
      })
  }, []);

  useEffect(() => {
    if (!location.keyword) {
      return;
    }
    requestLoadArticleByKeyword(location.keyword)
      .then((response) => {
        console.log(response);
        setArticleList(response.data);
      });
  }, [location.keyword]);

  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 style={{ textAlign: 'center' }}>검색</h1>
        <SearchMap loc={location} setLoc={setLocation}></SearchMap>
      </div>

      <div className="searchresult">
        <h3>{(articleList.length === 0 ? '검색결과 없음' : (`검색결과 ${listItem.length} 개 확인`))}</h3>
        {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;