미니 블로그 만들기 - 02

data.json 파일

아직 Server를 구현하지 않아 정보를 받아올 수 없기때문에 json파일로 간단한 data.json을 만들어보겠습니다.

[
  {
    "id": 1,
    "title": "리액트에서 리스트 렌더링하기",
    "content": "안녕하세요.\n이번 글에서는 리액트에서 리스트를 렌더링하는 방법에 대해서 배워보겠습니다.\n리스트를 렌더링하기 위해서는 자바스크립트 배열에서 제공하는 map함수를 사용합니다.",
    "comments": [
      {
        "id": 11,
        "content": "실제로 개발하다보면 map함수를 진짜 많이 쓰는 것 같아요😄"
      },
      {
        "id": 12,
        "content": "적용해보니 코드가 정말 간결해지네요ㅎㅎ"
      },
      ...
    ]
  },
  ...
]

---

List 컴포넌트 구현하기

블로그에 작성된 글 목록을 보여주는 PostList 컴포넌트와 각 Post별 댓글들을 보여주는 CommentList 컴포넌트를 구현해보겠습니다.

• 폴더 구성하기

  src

  component

  list
  ui

---

PostList 글 목록

list 폴더에 PostList.jsx를 생성합니다.

1. 먼저 각각의 글들 묶어줄 Container를 생성한 후 display : flex로 설정합니다.

   import React from "react";
   import { styled } from "@mui/material/styles";
   
   const Container = styled("div")`
     display: flex;
     flex-direction: column;
   `;
   
   const PostList = (props) => {
     return <Container></Container>;
   };
   
   export default PostList;
   

2. props로 받은 posts를 map 메서드를 이용해 나열합니다.

   PostListItem 컴포넌트에 props로 key, post, onClickItem을 넘깁니다.

   import React from "react";
   import { styled } from "@mui/material/styles";
   import PostListItem from "./PostListItem";
   
   const Container = styled("div")`
     display: flex;
     flex-direction: column;
   `;
   
   const PostList = (props) => {
     const { posts, onClickItem } = props;
   
     return (
       <Container>
         {posts.map((post, index) => {
           return (
             <PostListItem
               key={post.post_id}
               post={post}
               onClickItem={onClickItem}
             />
           );
         })}
       </Container>
     );
   };
   
   export default PostList;
   

즉, PostList 컴포넌트는 props로 받은 posts 배열 데이터를 map 메서드를 이용해 Container안에서 flex 형태로 나열하는 역할을 합니다.

---

PostListItem

글 목록에서 하나의 구성 요소를 나타냅니다.

제목과 본문의 내용을 2줄까지 보여주고 제목을 누르면 본 포스트로 이동하는 형태로 구현해보겠습니다.

자세한 방법은 라인 수 제한 글을 확인해주세요.

list 폴더에 PostListItem.jsx를 생성합니다.

import React from "react";
import { styled } from "@mui/material/styles";

const Container = styled("div")`
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid grey;
`;

const StyledTitleLink = styled("a")`
  display: block;
  padding-bottom: 1rem;
  color: #007bff;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    color: #0061c8;
  }
`;

const StyledContent = styled("div")`
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: grey;
  font-size: 1rem;
  overflow: hidden;
`;

const PostListItem = (props) => {
  const { post, onClickItem } = props;

  return (
    <Container>
      <StyledTitleLink onClick={() => onClickItem(post)}>
        {post.title}
      </StyledTitleLink>
      <StyledContent>{post.content}</StyledContent>
    </Container>
  );
};

export default PostListItem;

---

CommentList 댓글 목록

list 폴더에 CommentList.jsx를 생성합니다.

1. 먼저 각각의 글들 묶어줄 Container를 생성한 후 안의 내용을 display : flex로 설정합니다.
   ( 배경을 줘서 본문과 구분하겠습니다. )

   import React from "react";
   import { styled } from "@mui/material/styles";
   
   const Container = styled("div")`
     display: flex;
     flex-direction: column;
     background-color: lightgray;
   `;
   
   const CommentList = (props) => {
     return <Container></Container>;
   };
   
   export default CommentList;
   

2. props로 받은 comments를 map 메서드를 이용해 나열합니다.

   CommentListItem 컴포넌트에 props로 key, comment를 넘깁니다.

   import React from "react";
   import { styled } from "@mui/material/styles";
   import CommentListItem from "./CommentListItem";
   
   const Container = styled("div")`
     display: flex;
     flex-direction: column;
     background-color: lightgray;
   `;
   
   const CommentList = (props) => {
     const { comments } = props;
   
     return (
       <Container>
         {comments.map((comment, index) => {
           return (
             <CommentListItem
               key={comment.comment_id}
               comment={comment.content}
             ></CommentListItem>
           );
         })}
       </Container>
     );
   };
   
   export default CommentList;
   

즉, CommentList 컴포넌트 역시 props로 받은 comments 배열 데이터를 map 메서드를 이용해 Container안에서 flex 형태로 나열하는 역할을 합니다.

---

CommentListItem

댓글 목록에서 하나의 구성 요소를 나타냅니다.

list 폴더에 CommentListItem.jsx를 생성합니다.

import React from "react";
import { styled } from "@mui/material/styles";

const Wrapper = styled("div")`
  padding: 1rem;
`;

const CommentText = styled("span")`
  font-size: 14px;
`;

const CommentListItem = (props) => {
  const { comment } = props;
  return (
    <Wrapper>
      <CommentText>{comment}</CommentText>
    </Wrapper>
  );
};

export default CommentListItem;

---

정리

List 컴포넌트들을 구현했습니다.

다음에는 App.jsx에 라우팅을 구현하고 실제로 사용자에게 보여질 페이지 컴포넌트를 만들어보겠습니다.