감정 일기장 만들기 (3) - React에서 배열 사용하기 (리스트 렌더링)

오늘 배울 것은 리스트를 리액트로 어떻게 화면에 렌더링하는 지다.

리스트를 렌더링할 컴포넌트인 DiaryList.js를 만들어준다.

const DiaryList = () => {

  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
    </div>
  );
};

그리고 App.js에 만들고 싶은 리스트 객체를 입력해준다.

const dummyList = [
  {
    id: 1,
    author: "박중현",
    content: "hi1",
    emotion: 5,
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: "박중현2",
    content: "hi2",
    emotion: 3,
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: "박중현3",
    content: "hi3",
    emotion: 4,
    created_date: new Date().getTime(),
  },
];

입력한 리스트를 DiaryList.js에 prop으로 넘겨줄 것이다.

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

그리고 prop(diaryList)를 넘겨받은 DiaryList.js는 map 함수를 이용하여 화면에 렌더링한다.

const DiaryList = ({ diaryList }) => {
  console.log(diaryList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
        	<div key={it.id}  >
               <div>작성자:{it.author}</div>
               <div>일기 :{it.content}</div>
               <div>감정:{it.emotion}</div>
               <div>날짜:{it.created_date}</div>
            </div>
        ))}
      </div>
    </div>
  );
};

하지만, 일일히 item들을 DiaryList.js에 적어주는게 불필요하게 느껴져서 해당 아이템들을 컴포넌트화해서 DiaryItem.js에 넣어서 prop형태로 해당 아이템들을 전달해준다.

const DiaryItem = ({ author, content, emotion, created_date, 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.js에 리스트를 생성하고 그걸 화면에 렌더링하는 과정을 시험해보았다. 실제로 프로젝트에서 App.js에서 리스트를 생성해서 화면에 렌더링할 일은 없겠지만 어떤식으로 렌더링하는지를 과정으로 알아두면 좋을 것 같다.
최대한, 코드를 컴포넌트화 해서 분화해주는게 중요하다고 느꼈다.

최종 코드는 다음과 같다.

App.js

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

const dummyList = [
  {
    id: 1,
    author: "박중현",
    content: "hi1",
    emotion: 5,
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: "박중현2",
    content: "hi2",
    emotion: 3,
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: "박중현3",
    content: "hi3",
    emotion: 4,
    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">
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((it) => (
          <DiaryItem key={it.id} {...it} />
          //   <div key={it.id}  >
          //     <div>작성자:{it.author}</div>
          //     <div>일기 :{it.content}</div>
          //     <div>감정:{it.emotion}</div>
          //     <div>날짜:{it.created_date}</div>
          //   </div>
        ))}
      </div>
    </div>
  );
};

DiaryList.defaultProps = {
  dummyList: [],
};
export default DiaryList;

DiaryItem.js

const DiaryItem = ({ author, content, emotion, created_date, 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;

최종결과물