Main.js

import { useNavigate } from 'react-router-dom';

import { UserContext } from '../Context.js';
import Article from '../components/Article.js';
import React, { useEffect, useState, useContext} from 'react';
import '../css/Main.css'
import axios from 'axios';
axios.defaults.withCredentials = true;


function Button({history, children}){
  const navigate = useNavigate(); 
  return(
		<button onClick={() => {navigate('/search');}}>
			{children}
		</button>
	);
}

function Main() {
  const userContext = useContext(UserContext);
  const [articleList, setArticleList] = useState([])
  let listItem = [];
  listItem = articleList.map((article)=>{
    return(
      <Article 
      key={article._id}
      data={article}
    ></Article>
    )
  }
  )
  useEffect(() => {
    requestLoadArticle()
    .then((response) => {
      console.log(response)
      setArticleList(response.data)
    })
  }, []);

  const handleSortChange = (event) => {
    console.log(event.target.value)
    requestSortArticle(event.target.value)
    .then((response) => {
      console.log(response)
      setArticleList(response.data)
    })
	};

  return(
    <div className="App">
        <h1>식도락에 오신 것을 환영합니다. </h1>
        <div className="introduction">
        <p>식당 리뷰를 손쉽게 모아볼 수 있는 서비스</p>
        </div>
        <div style={{display: 'flex'}}>
          <Button>검색</Button>
          <select id="addInputPrior" onChange={handleSortChange}>
            <option value="time">최신순</option>
            <option value="like">인기순</option>
          </select>
        </div>

        {listItem}
    </div>)
  ;
}

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

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

export default Main;