[ React ] React 기본 ③ React에서 배열 사용하기 - 1. 리스트 랜더링 ( 조회 )

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

 

1. 저장하기 버튼을 누르면 리스트 밑에 추가를 하기 위한 임시 배열을 생성하고 DiraryList 컴포넌트에  props로

데이터를 전달해서 그 데이터를 리스트로 랜더링 해보기

 

new Date()를 통해 생성된 Date 객체를 배열에 담는 경우 객체 안에 있는 프로퍼티를 문자열화 하게 되면 사용하기

불편할 수 도 있다. 그래서 Date 객체에 getTime() 메소드를 사용해서 밀리세컨즈로 변환해 사용해준다.

 

getTime()이라는 Date 객체의 메소드는 number를 반환하는 함수이다. 시간을 받아 밀리세컨즈로 반환한다.

 

App.js

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

const dummyList = [
  {
    id : 1,
    author : "2chaechae",
    content : "hello 1",
    emotion : 4,
    created_date : new Date().getTime() // new Date()는 현재 시각을 기준으로 한다.
  },  {
    id : 2,
    author : "2monmon",
    content : "hello 2",
    emotion : 2,
    created_date : new Date().getTime() 
  },  {
    id : 3,
    author : "2dduddu",
    content : "hello 3",
    emotion : 1,
    created_date : new Date().getTime() 
  }
];


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

export default App;

 

dummyList라는 일기 데이터 배열을 DiaryList 컴포넌트에 diaryList라는 Props로 전달을 한다.

 

DiaryList.js

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

DiaryList.defaultProps = { //undefined 방지용으로 기본값 설정
    diaryList : []
};

export default DiaryList;

 

diaryList.map()은 it을 사용해서 전달받은 각각의 요소들을 순회해서 diaryList의 값을 출력할 수 있다.

 

* map은 배열의 원본 요소를 순회함과 동시에 연산을 수행함으로써 리턴되는 값들만 따로 배열에 추려내 새로운 배열을

반환할 수 있게끔 해주는 함수이다. 

 

it에는 diaryList 배열의 하나하나 요소가 들어가게 된다. 즉 배열안에 존재하는 하나의 객체가 it이 된다. 

그래서 점 표기법으로 객체의 value에 접근할 수 있다.

 

리스트에 있는 각각의 자식 요소들은 반드시 고유한 키 Prop을 받아야한다. App 컴포넌트의 dummyList의 아이템 마다

만들어 놓은 고유한 아이디를 이용해서 key Prop을 지정해주면 된다.

 

* 만약 고유한 아이디가 존재하지 않는 경우 map 내장함수의 콜백 함수의 두번째 파라미터인 idx를 사용하면 된다.

→ 배열 요소의 index는 고유하기 때문에 index를 키로 사용해도 문제가 생기지 않는다. 하지만 배열을 수정하거나

삭제해서 index의 순서가 변경된다면 리액트에서 문제가 발생할 수도 있다.

 

 	<div>
            {diaryList.map((it,idx) => (
                <div key={idx}>
                    <div>작성자 : {it.author}</div>
                    <div>일기 : {it.content}</div>
                    <div>감정 : {it.emotion}</div>
                    <div>작성 시간 : {it.created_date}</div>
                </div>
            ))}
        </div>

 

---

2. 일기 아이템 하나하나를 수정하거나 삭제하는 기능들을 컴포넌트 안에 만들어주기 위해서는 배열 데이터를 사용해서

 랜더하는 아이템을 별도의 컴포넌트로 분할해주는 것이 좋다.

 

DiaryItem은 데이터를 모두 받아서 랜더링해야하고, 리스트의 아이템이기 때문에 key를 id로 전달해주고 

일기 객체 하나에 포함된 모든 데이터를 spread 연산자를 통해 다 전달해준다.

 

DiaryList.js

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 = { //undefined 방지용으로 기본값 설정
    diaryList : []
};

export default DiaryList;

 

DiaryItem.js

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).toLocaleString()}</span>
            </div>
            <div className="content">{content}</div>
            <br />
        </div>
    );

}

export default DiaryItem;

 

new Date(created_date)는 created_date가 가지고 있는 밀리세컨즈가 가지고 있는 시간을 기준으로 Date 객체가

생성이 된다. Date 객체의 toLocalString()을 이용해서 사람이 알아보기 쉽게 바꿔줄 수 있다.

 

App.css

.App {
  text-align: center;
}

.DiaryEditor {
  margin: 0 auto;
  border: 5px solid skyblue;
  padding: 20px;
  width: 500px;
  margin-top: 30px;
}

.DiaryEditor input, textarea {
  margin-bottom: 20px;
  width: 400px;
  padding: 10px;
}

.DiaryEditor textarea {
  height: 150px;
}

.DiaryEditor select {
  width: 400px;
  padding: 10px;
  margin-bottom: 20px;
}

.DiaryEditor button {
  width: 400px;
  padding: 10px;
  cursor: pointer;
  border: 2px solid skyblue;
  color: aliceblue;
  background-color: skyblue;
}

/* DiaryList */

.DiaryList {
  width: 800px;
  margin: 0 auto;
  border: 1px solid skyblue;
  padding: 20px;
  margin-top: 20px;
}

.DiaryList h2 {
  text-align: center;
}

/* DiaryItem */
.DiaryItem {
  width: 500px;
  margin: 0 auto;
  background-color: aliceblue;
  margin-bottom: 10px;
  padding: 20px;
}

.DiaryItem .info {
  border-bottom: 1px solid skyblue;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.DiaryItem .date {
  color: gray;
}

.DiaryItem .content {
  font-weight: bold;
  margin-bottom: 30px;
  margin-top: 30px;
}