リストクエリーの表示

결과물
リストを次のようにレンダリングします.jsでロードします.App.js

const dummyList = [
  {
    id: 1,
    author: "이름",
    content: "hellow?",
    emotion: 5,
    created_date: new Date().getTime(),
  },
  {
    id: 2,
    author: "이름2",
    content: "hellow!",
    emotion: 3,
    created_date: new Date().getTime(),
  },
  {
    id: 3,
    author: "이름3",
    content: "hellow+",
    emotion: 4,
    created_date: new Date().getTime(),
  },
  
];

dummyListを作成し、要素をオブジェクトとします.

new Date().getTime()を使用して、現在の時間を取得します.

でも、new Date().gettime()だけを使うと、上の灰色のアルファベットのように理解しにくい数字が出力されます.(表示に適した日付を作成する方法について説明します.)

生成したdummyListを他の素子から加工してApp素子に配布する.
加工部品の名前をDiaryListとします.

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

export default App;

DiaryListはdiaryList名義でdummyListを送信する.DiaryList

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: [],
};
// diaryList가 비었을때 default값을 정해주지 않으면 error가 발생한다.

export default DiaryList;

受信した日記リストは配列として受信されます.

ここのid、作者、コンテンツなどの要素を使用できます.これらの要素を使用するには、マッピングとしてdiaryListを使用します.

では、id、author、およびコンテンツ内の要素の値を渡すDiaryItemというコンポーネントが作成されます.
{..it}を使用して、日記リストのすべての要素を展開および転送します->作者、内容、感情などを展開してお渡しします.

DiaryItem

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; 

DiaryItemはDiaryListの要素を使用できます.

new Date()でさっき読んでなかった(?)日付データ(created date)を入力し、toLocalString()に記入すると、現在の日付時刻が得られます.

上記のように、構成部品にデータをロードし、加工したデータを親構成部品に返します.