[React.js] React에서 배열 사용하기 - 리스트 렌더링

const dummyList = [
  {
    id:1,
    author : "이정환",
    content : "하이1",
    emotion : 5,
    created_date : new Date().getTime()
  },
  {
    id:2,
    author : "ㅎ호홍",
    content : "하이2",
    emotion : 2,
    created_date : new Date().getTime()
  },
  {
    id:3,
    author : "아무개",
    content : "하이3",
    emotion : 1,
    created_date : new Date().getTime()
  },
]

더미 리스트를 이용해 데이터를 받고 데이터를 화면에 출력하도록 하도록 한다.

리스트 컴포넌트 만들기

js파일 DiaryList 컴포넌트 만들기

배열에 저장된 일기 리스트를 화면에 나타내는 컴포넌트

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

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

• props로 들어온 diaryList는 App.js에 있는 dummyList의 배열의 데이터들이 들어온다.

diaryList가 없을 때를 대비해 값 설정

DiaryList.defaultProps = {
    diaryList : [],
}

디폴트값을 빈 배열로 만들어 Error가 나지 않도록 방지해 준다.

impor하기

리스틑 컴포넌트를 App.js파일에 import시켜준다.

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

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

리스트 컴포넌트 수정

DiaryList에 들어온 배열의 데이터를 이용해 화면에 나타낼 수 있으나, 추가, 변경될 수 이는 데이터를 따로 처리하는 기능을 가진 새로운 컴포넌트로 만들어 관리한다.

DiaryItem.js로 새로운 컴포넌트 생성 및 DiaryList컴포넌트에 추가

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의 배열의 요소들을 DiaryItem컴포넌트가 데이터를 받으르 수 있게끔 props에 `스프레드 연산자{...it}`를 이용해 모든 요소가 들어갈 수 있게 한다.

DiaryItem 컴포넌트

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).toLocaleDateString()}</span>
        </div>
        <div className = "content">{content}</div>
    </div>
   );
}
export default DiaryItem;

• {author, content, emotion, created_date, id}: 각 요소 객체의 프로퍼티들의 key값을 이용해 각 요소들을 생성해 브라우저에 나타나게 한다.
• 참고) new Date(created_date).toLocaleDateString()
  • dummyList에 저장된 시간의 값은 Millisecond값을 가지고 있다.
  • 이 값을 알아볼 수 있게 변환하는데 new Date()에 ()안에 밀리세컨즈값을 넣고, toLocalDateString()을 이용해 저장한 날짜와 시간을 알아볼 수 있게 계산이 된다.