[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 1 - 리스트 렌더링 (조회)

1. DiaryList.js 파일 생성

2. App.js에 추가

3. 임시배열 만들어서 prop으로 전달

4. DiaryList가 undefined로 전달될 경우 에러 해결

5. DiaryItem.js 생성

---

 

App.js

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

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()
  },
  {
    id: 3,
    author: "다로시",
    content: "하이 3",
    emotion: 1,
    created_date: new Date().getTime()
  },
  {
    id: 4,
    author: "라로시",
    content: "하이 4",
    emotion: 5,
    created_date: new Date().getTime()
  },
  {
    id: 5,
    author: "마로시",
    content: "하이 5",
    emotion: 5,
    created_date: new Date().getTime()
  },
];

function App() {
  return (
    <div className="App">
      <DiaryEditor />
      <DiaryList diaryList={dummyList} />
    </div>
  );
}

export default App;

 

---

DiaryList.js

import DiaryItem from "./DiaryItem";

const DiaryList = ({ diaryList }) => {
  console.log(diaryList);
  return (
    <div className="DiaryList">
      <p>일기 리스트</p>
      <h5>{diaryList.length}개의 일기가 있습니다.</h5>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  );
};

DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

---

DiaryItem.js

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

export default DiaryItem;

---

 

App.css

/* App */
.App {
}

/* editor */

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

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

.DiaryEditor input {
  padding: 10px;
}
.DiaryEditor textarea {
  padding: 10px;
  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;
}

.DiaryList h2 {
  text-align: center;
}

/* List Item */

.DiaryItem {
  background-color: rgb(240, 240, 240);
  margin-bottom: 10px;
  padding: 20px;
}

.DiaryItem span {
  margin-right: 10px;
}

.DiaryItem .info {
  border-bottom: 1px solid gray;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.DiaryItem .date {
  color: gray;
}

.DiaryItem .content {
  margin-bottom: 30px;
  margin-top: 30px;
  font-weight: bold;
}

.DiaryItem textarea {
  padding: 10px;
}

 

 

---

• 출처
  https://inf.run/N9fZn

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의