[Front End] Creating and linking the article list

Article 리스트와 링크를 만들기

 

여기서는 기존에 Url을 직접 입력해서 들어가는 방식에서 Article리스트를 구현해서 링크를 통해 해당 내용를 볼수 있도록 변경 하도록 하겠습니다.

 

그러기 위해서 ArticleListPage.js를 다음과 같이 코딩해 줍니다.

ArticleListPage.js

import { Link } from 'react-router-dom';
import articles from './article-content';

const AriclesListPage = () => {
    return (
        <>
            <h1>Articles</h1>
            {articles.map(article => (
                <Link key={article.name} className="article-list-item" to={`/articles/${article.name}`}>
                    <h3> {article.title}</h3>
                    <p>{article.content[0].substring(0, 150)}...</p>
                </Link>
            ))}
        </>
    )
}

export default AriclesListPage;

 

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