PostRead.js

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

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

function PostRead() {
    let params = useParams();
    const userContext = useContext(UserContext);
    const [article, setArticle] = useState(null)
    useEffect(() => {
      requestLoadArticleById(params.id)
      .then((response) => {
        console.log(response)
        setArticle(response.data)
      })
    }, []);  
    console.log(article);
    console.log(article?Object.values(article):"no");
    if (article) {
      return(
        <div className="App">
          <h1>포스트 페이지</h1>
            <div className="introduction">
              포스트 내용
              <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
              <Article data={Object.values(article)}></Article>
            </div>
        </div>)
    }
    else {
      return(
        <div className="App">
          <h1>포스트 페이지</h1>
            <div className="introduction">
              포스트 내용
              <p>현재 페이지의 파라미터는 { params.id } 입니다.</p>
              <p>로딩준</p>
            </div>
        </div>)
    }

    ;
  }

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

  export default PostRead;