[Front End - Back End] Adding React hooks

서버에서 문서 페이지로 데이터를 로드하는 방법을 살펴보겠습니다.

현재 페이지의 컴포넌트 중 어느것도 실제로 어떤 종류의 메모리도 가지고 있지 않습니다. 그 자체로 매개 변수로 요청을 받아서 그대로 결과를 뿌려주는 형태입니다. 이제 여기에 서버에서 반환하는 응답을 저장할 장소를 제공하도록 하겠습니다. 상태와 효과를 추가해주는 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

결과 화면은 다음과 같습니다.