React에서 배열 사용하기 1 - 리스트 렌더링 (조회)

일기를 작성하면, 아래 리스트에 우리가 작성한 일기들을 배열로 리스트 렌더링을 하는 예제.

DiaryList 이름으로 리스트를 렌더링 할 컴포넌트를 하나 만들어줌.
렌더링 : 화면에 표시한다. 라는 의미

App 컴포넌트에 테스트로 일기 리스트를 만들어두고, 시작!

App.js

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

const dummyList = [
    {
        id: 1,
        author: '유태윤',
        content: '안녕하세요.',
        emotion: 3,
        create_date: new Date().getTime(),
    },
    {
        id: 2,
        author: '홍길동',
        content: '화이팅 합니다!! 다들!!',
        emotion: 5,
        create_date: new Date().getTime(),
    },
    {
        id: 3,
        author: '무지개',
        content: '헤헿......헿...',
        emotion: 2,
        create_date: new Date().getTime(),
    },
]


function App() {
    return (
        <div className="App">
            <DiaryEditor />
            // DiaryList에 props으로 리스트 보냄
            <DiaryList dummyList={dummyList} />
        </div>
    );
}

export default App;

DiaryList .js

import { useState } from "react";
import DiaryItem from './DiaryItem';

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

            <div>

                {dummyList.map((it) => {
                    // key는 고유한 id를 가지고있는 값으로 설정해주는게 좋음
                    return (
                        // ...을 이용해 it안에 있는 모든 데이터를 props으로 <DiaryItem/>에 전달
                        <DiaryItem key={it.id} {...it} />

                    )
                    // dummyList.map을 통해서 리스트 아이템들을 렌더링 하고 있는데, 
                    // 우리 프로젝트는 일기 아이템을 삭제, 수정 등 기능들을 map함수 안에 다 넣어줘야함.
                    // 아이템 하나하나를 수정,삭제 기능을 여기 컴포넌트 안에 다 만들어줘야함.
                    // 그렇게 되면 에러가 날 확률이 높아지고, 딱히 좋지 않은 방법임
                    // 그래서 아이템을 렌더하는 컴포넌트를 따로 만들어 분활.
                })}
            </div>
        </div>
    );
};

// undefined으로 전달될것 같은 Props들을 기본값을 설정할수있음
// 만약 undefined이나 이상한 값이 전달되면 빈 배열로 기본값 설정.
DiaryList.defaultProps = {
    dummyList: [],
}

export default DiaryList;

DiaryItem .js

import { useState } from "react";
// ...it props으로 받은 데이터 쓰기위해 설정
const DiaryItem = ({ id, author, content, create_date, emotion }) => {
    return (
        <div className='DiaryItem'>
            <div className='info'>
                <p>작성자 : {author}</p>
                <p>감정점수 : {emotion}</p>
            </div>

            <div className='content'>
                <p> {content} </p>
                <p className='date'>{new Date(create_date).toLocaleString()}</p>
            </div>
        </div>
    )
}

export default DiaryItem;