[React 기본 일기장만들기] React에서 배열 사용하기 1- 리스트렌더링(조회)

 

코드 바로가기

 

 

 

이렇게 데이터들을 리스트로 화면에 보여주는 기능을 만들 것이다.

 

1. 새 파일 만들기

 

이렇게 새 파일을 만들고, return 값을 만든 후 이를 내보내는 코드를 작성한다.

 

화면에 보이게 하기 위해서 

이렇게 App.js파일을 수정한다.

 

2.데이터 만들기

App.js에 리스트에 보여줄 데이터를 위와 같이 만든다. id는 데이터들의 고유 번호이고, 나머지는 배열 내의 요소들을 나타낸다. 

created_date에서 new Date().getTime()을 하면 현재 시간을 숫자형태로 리턴한다.

 

그 다음 prop로 위 값을 DiaryList에 전달한다.

 

DiaryList에서 

이렇게 props값을 전달받고, 전달받은 배열을 리스트형태로 출력한다. 

diaryList는 배열이니까 map함수를 사용하여 하나씩 화면에 표시하도록 했다. 

그런데 이렇게 하면 배열에 아무것도 없을 때 오류가 난다. 이를 방지하기 위해 defaultProps를 이용한다.

 

이를 실행하면,

key를 사용하라는 에러가 나온다. 

 

이를 해결하기 위해 태그의 key 값에 미리 설정해둔 id값을 넣도록 한다.

 

3.리스트 컴포넌트 만들기

 

그런데 이렇게 하면 배열을 삭제, 수정할 때 번거로움이 있을 수 있다. 이를 방지하기 위해 리스트에 뜨는 요소를 컴포넌트화 한다.

 

DiaryItem.js

 

 

파일을 새로 만들고 , 위와 같이 props를 받는 부분을 설정한다. 그 다음 받은 요소들을 이용해서 리스트를 만드는 과정을 작성한다.

 

DiaryList.js에서 DiaryItem컴포넌트를 호출한다. 이 때 ...it로 요소를 prop로 전달한다.

 

4.css 수정하기

 

그 다음 만든 리스트를 보기 좋게 디자인한다.

 

App.css에서 수정한다.

 

 

그럼 이렇게 리스트가 완성된다.

 

코드

 

App.js

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

const dummyList = [
  {
    id : 1,
    author : "잔디",
    content : "안녕",
    emotion : 5,
    created_date : new Date().getTime(),
  },
  {
    id : 2,
    author : "풀",
    content : "안녕하이",
    emotion : 2,
    created_date : new Date().getTime(),
  },
  {
    id : 3,
    author : "리액트",
    content : "안녕안녕",
    emotion : 1,
    created_date : new Date().getTime(),
  },
]


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

export default App;

DiaryItem.js

const DiaryItem = ({author,content,created_date,emotion,id}) =>{
    return <div className="DiaryItem">
        <div className="info">
            <span> 작성자 : {author} | 감정점수 : {emotion}</span>
            <br></br>
            <span className="date">{new Date(created_date).toLocaleDateString()}</span>
        </div>
        <div className="content">{content}</div>
    </div>
}

export default DiaryItem;

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 = {
    diaryList : [],
};

export default DiaryList;

App.css

.DiaryEditor{
  border: 1px solid gray;
  text-align: center;
  padding: 20px;
}

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

.DiaryEditor textarea{
  height: 150px;
}

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

.DiaryEditor button{
  width: 500px;
  padding: 10px;
  cursor:pointer;
}

.DiaryList{
  border: 1px solid gray;
  padding: 20px;
  margin-top: 20px;
}

.DiaryList h2{
  text-align: center;
}

.DiaryItem{
  background-color: rgb(240,240,240);
  margin-bottom: 10px;
  padding: 20px;
}

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

.DiaryItem .date{
  color: gray;
}

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

 

출처 : 한입크기로 잘라먹는 리액트