반응형
서버에서 문서 페이지로 데이터를 로드하는 방법을 살펴보겠습니다.
현재 페이지의 컴포넌트 중 어느것도 실제로 어떤 종류의 메모리도 가지고 있지 않습니다. 그 자체로 매개 변수로 요청을 받아서 그대로 결과를 뿌려주는 형태입니다. 이제 여기에 서버에서 반환하는 응답을 저장할 장소를 제공하도록 하겠습니다. 상태와 효과를 추가해주는 React hook을 사용합니다.
변경한 코드는 아래와 같습니다.
ArticlePage.js
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import NotFoundPage from './NotFoundPage';
import articles from './article-content';
const ArticlePage = () => {
const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: [] });
const { articleId } = useParams();
useEffect(() => {
setArticleInfo({ upvotes: 3, comments: [] });
}, []);
const article = articles.find(article => article.name === articleId);
if (!article) {
return <NotFoundPage />
}
return (
<>
<h1>{article.title}</h1>
<p>This article has {articleInfo.upvotes} upvote(s)</p>
{article.content.map((paragraph, i) => (
<p key={i}>{paragraph}</p>
))}
</>
);
}
export default ArticlePage;
위의 소스에서 좋아요는 3개로 하드 코딩 되어 있고 나중에 이부분은 서버와 연결하면서 수정하도록 하겠습니다.
소스를 수정한후 클라이언트를 다시 시작합니다.
npm run start
결과 화면은 다음과 같습니다.
반응형
'PROGRAMING > FULL STACK' 카테고리의 다른 글
[Front End - Back End] Displaying comments (0) | 2024.03.21 |
---|---|
[Front End - Back End] Adding data loading to page components (0) | 2024.03.21 |
[Front End - Back End] The Axios library (0) | 2024.03.21 |
[MongoDB] Reuse connection (0) | 2024.03.20 |
[MongoDB] Rewriting comments (0) | 2024.03.20 |