[React] 배열로 리스트 사용하기 (map)

일기 리스트에 일기 저장한 리스트가 뜨도록 만들기

 

 

먼저 App.js에 테스트를 위해 dummyList를 만들어보자.

 

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

const dummyList = [
  {
    id: 1,
    author: "임",
    content: "hi",
    emotion: 5,
    create_date: new Date().getTime(),
  },
  {
    id: 2,
    author: "박",
    content: "hi2",
    emotion: 2,
    create_date: new Date().getTime(),
  },
  {
    id: 3,
    author: "최",
    content: "hi3",
    emotion: 3,
    create_date: new Date().getTime(),
  }
  ,  {
    id: 4,
    author: "김",
    content: "hi4",
    emotion: 4,
    create_date: new Date().getTime(),
  }
];

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

export default App;

DiaryList 컴포넌트에 prop으로 dummyList를 diaryList로 전달.

 

const DiaryList = ({ diaryList }) => {
	console.log(diaryList);

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

export default DiaryList;

console.log로 확인해보면 dummyList가 잘 출력됨을 확인.

 

 

📗 map으로 list 화면에 출력하기

 

 

배열로 받은 list의 값이 undefined가 될 수도 있다면 저렇게 입력했을 때 오류가 날 것이다. 그럴 때 defaultProps를 사용할 수 있다.

 

defaultProps : 기본값을 설정해준다.

 

import DiaryItem from "./DiaryItem";

const DiaryList = ({ diaryList }) => {

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

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

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

export default DiaryItem;

create_date는 ms이므로 알아보기힘들다. new Date()에 create_date를 넣고 toLocaleString()

알아보기 쉬운 시간으로 나오게 된다.