[React] 게시글 list 렌더링

✏️구현코드

• DiaryItem > DiaryList (개별 item 디자인 후 list로 띄우기)

예시로 띄울 dummyList (App.js)

const dummyList = [
  {
    id: 1,
    author: "철수",
    content: "테스트 일기1",
    emotion: 5,
    created_date: new Date().getTime()
  }, {
    id: 2,
    author: "짱구",
    content: "테스트 일기2",
    emotion: 3,
    created_date: new Date().getTime()
  },
  ...
  function App() {
  return (
    <div className='App'>
      <DiaryEditor />
      //dummyList를 diaryList 값으로 전달
      <DiaryList diaryList={dummyList} />
    </div>
  );
 }
]

DiaryItem.js

// item으로 보낼 값: id, 작성자, 내용, 감정점수, 작성날짜
const DiaryItem = ({ id, author, content, emotion, created_date }) => {
    return (
        <div className="DiaryItem">
            <div className="info">
                <span>작성자: {author} | 감정점수: {emotion} </span>
                <span className="date">{new Date(created_date).toLocaleString()}</span>
            </div>
            <div className="content">{content}</div>
        </div>
    )
}

export default DiaryItem;

DiaryList.js

//App.js에서 dummyList를 diaryList 값으로 전달함
const DiaryList = ({ diaryList }) => {
    return (
        <div className="DiaryList">
            <h2>일기 리스트</h2>
            <h4>{diaryList.length}개의 일기가 있습니다.</h4>
            <div>
      			//전달받은 list의 item을 모두 띄움
                {diaryList.map((it) => (
                    <DiaryItem key={it.id} {...it} />
                ))}
            </div>
        </div>
    )
}

DiaryList.defaultProps = {
    diaryList: []
}

export default DiaryList;