react simple日記項目3

import DiaryItem from "./DiaryItem";

const DiaryList = ({ diaryList }) => {
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다</h4>
      <div>
        {diaryList.map(
          (
            it // 다이어리 요소의 하나하나가 it으로 바뀌어서 들어온다 = dummydata에 넣은 객체 하나하나가 들어온다
          ) => (
            // it이라는 객체에 포함된 모든 데이터 DiaryItem에 prop으로 전달
            <DiaryItem key={`diaryitem_${it.id}`} {...it} />
          )
        )}
      </div>
    </div>
  );
};

// undefined로 전달될거 같은 값들을 기본값으로 설정
DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

import "./App.css";
import DiaryEditor from "./DiaryEditor";
import DiaryList from "./DiaryList";

const dummyList = [
  {
    id: 1,
    author: "김태주",
    content: "하이 1",
    emotion: 1,
    // 현재 시간을 기준으로 생성
    created_date: new Date().getTime(),
  },

  {
    id: 2,
    author: "김길동",
    content: "하이 2",
    emotion: 3,
    // 현재 시간을 기준으로 생성
    created_date: new Date().getTime(),
  },

  {
    id: 3,
    author: "홍길동",
    content: "하이 3",
    emotion: 1,
    // 현재 시간을 기준으로 생성
    created_date: new Date().getTime(),
  },
];

// dummydata를 DiaryList에diaryList라는 이름의 prop으로 전달
function App() {
  return (
    <div className="App">
      <DiaryEditor />
      <DiaryList diaryList={dummyList} />
    </div>
  );
}

export default App;

const DiaryItem = ({ id, author, content, emotion, created_date }) => {
  return (
    <div className="DiaryItem">
      <div className="info">
        <span className="author_info">
          | 작성자 : {author} | 감정점수 : {emotion} |
        </span>
        <br />
        <span className="date">{new Date(created_date).toLocaleString()}</span>
      </div>
      <div className="content">{content}</div>
    </div>
  );
};

export default DiaryItem;

.DiaryEditor {
  border: 1px solid gray;
  text-align: center;
  padding: 20px;
}

.DiaryEditor input,
textarea {
  margin-bottom: 20px;
  width: 500px;
  padding: 10px;
}

.DiaryEditor textarea {
  height: 150px;
}

.DiaryEditor select {
  width: 300px;
  padding: 10px;
  margin-bottom: 20px;
}

.DiaryEditor button {
  width: 500px;
  padding: 10px;
  cursor: pointer;
}

/* List */

.DiaryList {
  border: 1px solid gray;
  padding: 20px;
  margin-top: 20px;
}

/* List  */

.DiaryList {
  border: 1px solid gray;
  padding: 20px;
  margin-top: 20px;
}

.DiaryList h2 {
  text-align: center;
}