<aside> 💡 세부 목표

배열을 이용하여 React에서 LIST를 렌더링 해보고 개별적인 컴포넌트로 만들어보기

</aside>

알아야 할 새로운 함수

new Date().getTime() // 현재 시간을 받아 milliseconds로 변환해주는 함
new Date(변환한시간).toLoacalString()// 인간이 보기 편한 일자로 바꿈

• 일단 더미 데이터 List를 생성한다.

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:5,
    created_date: new Date().getTime() 
  },
  {
    id:3,
    author:"아무개",
    content:"하이 3",
    emotion:5,
    created_date: new Date().getTime() 
  },
]

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

export default App;

• map을 이용하면 해당 List를 순회하여 item에 맞는 key로 데이터를 꺼낼 수 있다.

여기서 주의할 점은 고유한 key를 설정해야 하는데 이때는 id 또는 index번호를 넣는다(비추)

또 인자로 받은 List가 없는 에러를 대비하여 defaultProps도 설정!

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

DiaryList.defaultProps = {
    diaryList: [],
}

export default DiaryList;

하지만 diarytList를 랜더링 할 녀석들을 저렇게 쓰는게 아니라 따로 파일로 만들어서 빼줘야함

DiaryList.js

import DiaryItem from "./DiaryItem";

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

DiaryList.defaultProps = {
    diaryList: [],
}

export default DiaryList;

DiaryItem.js

이런식으로 DiaryList에 있는 item들을 따로 컴포넌트로 만들어줌