Main.js

import { useNavigate } from 'react-router-dom';
import cookie from 'react-cookies';
import { UserContext } from '../Context.js';
import Article from '../components/Article.js';
import React, { useEffect, useState, useContext} from 'react';

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 
      title={article.title}
      author = {article.author.nickname}
      content={article.content} 
      images={article.imageUrls}
    ></Article>

    )
  }
  )
  useEffect(() => {
    requestLoadArticle()
    .then((response) => {
      console.log(response)
      setArticleList(response.data)
    })
  }, []);

  return(
    <div className="App">
      <h1>메인 페이지 입니다.</h1>
        <div className="introduction">
          소개 내용을 담을 공간 
        </div>
        <Button>검색</Button>
        {listItem}
    </div>)
  ;
}


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

export default Main;

/*
 {
    _id: new ObjectId('65675ee46aab64d2ed605e3c'),
    title: 'ㅋ',
    content: 'ㅋㅋ',
    imageUrls: [],
    author: {
      _id: new ObjectId('6566403f224df4126bfb3e50'),
      user_id: 'grasscraft0714@gmail.com',
      nickname: 'ᄅᄅᄒ',
      email: 'grasscraft0714@gmail.com',
      google: [Object],
      __v: 0
    },
    comments: [],
    likes: [],
    createdAt: 2023-11-29T15:55:16.525Z,
    __v: 0
  }

*/