1. 데이터 조회

//App.js 

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

***const dummyList = [
  {
    id: 1,
    name: "배재현",
    content: "하이1",
    point: 4,
    createDate: new Date().getTime(),
  },
  {
    id: 2,
    name: "배재현2",
    content: "하이2",
    point: 3,
    createDate: new Date().getTime(),
  },
  {
    id: 3,
    name: "배재현3",
    content: "하이3",
    point: 5,
    createDate: new Date().getTime(),
  },
];***

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

export default App;

*//*DiaryList.js

import DiaryItem from "./DiaryItem";

const DiaryList = ({ **list** }) => {
  console.log(list);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{list.length}개의 일기가 있습니다. </h4>

      <div>
        ***{list.map((it) => (
          <DiaryItem key={it.id} {...it} />
        ))}***
      </div>
    </div>
  );
};

DiaryList.defaultProps = {
  **// list가 제대로 안올수도 있기 때문에.
  list:** [],
};

export default DiaryList;

//DiaryItem.js

const DiaryItem = (***data***) => {
  return (
    <div className="DiaryItem">
      <div className="info">
        <span> 작성자 : {data.name} </span> | <span> 점수 : {data.point} </span>
        <span className="date">
          <br />
          작성일 : {new Date(data.createDate).toLocaleString()}{" "}
        </span>
      </div>
      <div className="content">
        <span> 내용 : {data.content} </span>
      </div>
    </div>
  );
};

export default DiaryItem;

2. 데이터 추가하기 ( 리액트 데이터 흐름 보기 )

2-1. React 데이터 흐름 및 특징

Untitled