MyPage.js

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

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

import axios from 'axios';
axios.defaults.withCredentials = true;

function MyPage() {
  const userContext = useContext(UserContext);
  const [articleList, setArticleList] = useState([]);
  const userinfo = cookie.load('name');

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

  useEffect(() => {
    requestArticles(userinfo.id)
      .then((response) => {
        setArticleList(response.data)
      })
  }, []);

  return (
    <div className="App">
      <h1>{userinfo.name}님의 페이지</h1>
      <div className="introduction">
        {articleList.length}개의 게시글이 있습니다.
      </div>

      {listItem}
    </div>);
}

async function requestArticles(id) {
  const response = await axios({
    url: `${process.env.REACT_APP_BACKEND_URL}/article/user/${id}`, // 통신할 웹문서
    method: 'get', // 통신할 방식
  });
  return response;
}

export default MyPage;