[Front End] Making your articles list modular

Articles List modeular 작성

 

지금까지 mapping을 이용해서 컨텐츠를 불러왔지만 Aritcle추가 될때마다 직접 입력하는 수고를 덜기 위해 재사용이 가능한 컴포넌트를 구성하도록 하겠습니다.

 

그 재사용이 가능한 컴포넌트 구성을 위해 src폴더 아래에 components라는 새로운 폴더를 추가합니다. 그리고 그 아래에 ArticlesList.js라는 재사용이 가능한 파일을 추가합니다.

ArticlesList.js

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

const ArticlesList = ({ articles }) => {
    return (
        <>
            {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 ArticlesList;

 

그리고 src폴더>pages폴더 아래에 있는 ArticlesListPage.js를 다음과 같이 변경합니다.

ArticlesListPage.js

import articles from './article-content';
import ArticlesList from '../components/ArticlesList';

const AriclesListPage = () => {
    return (
        <>
            <h1>Articles</h1>
            <ArticlesList articles={articles} />
        </>
    )
}

export default AriclesListPage;

 

결과 화면은 다음과 같습니다. 이전과 외관상으로 변한건 없지만 재사용이 가능한 컴포넌트로 변경했습니다.