[React] 데이터 리스트 렌더링 (조회) (일기장 만들기 3탄)

 

코드가 1탄부터 이어지기 때문에 쭉 보고 오셔야합니다~

 

 1탄 

https://dev-ini.tistory.com/73

[React] useState로 사용자의 입력 처리하기: input, button에 이벤트 달기 (일기장 만들기 1탄)

 

 

 2탄 

https://dev-ini.tistory.com/75

[React] useRef로 DOM 조작하기 (일기장 만들기 2탄)

 

 

 

---

 

 

 

 1. DiaryList.js 컴포넌트를 생성한다 (일기 리스트를 보여주는 곳) 

 

 DiaryList.js 

const DiaryList = () => {
return (
<div className="DiaryList">
<h2>일기 리스트</h2>
</div>
);
}

export default DiaryList;

 

 

 

 2. App.js에서  <DiaryList /> 컴포넌트를 불러온다. 

 

 App.js 

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

function App() {
return (
    <div className="App">
<DiaryEditor /> 
<DiaryList />  // 컴포넌트를 불러온다.
    </div>
  );
};

export default App;

 

 

 

 3. 리스트 데이터를 만든다. 

 

 App.js 

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

// 리스트 데이터 생성
const dummyList = [
  {
    id:1,
    author: "황혜인", 
    content: "하이1",
    emotion: 5,
    created_date: new Date().getTime()
  },
  {
    id:2,
    author: "짱구", 
    content: "하이2",
    emotion: 3,
    created_date: new Date().getTime()
  },
  {
    id:3,
    author: "철수", 
    content: "하이3",
    emotion: 3,
    created_date: new Date().getTime()
  },
  {
    id:4,
    author: "흰둥이", 
    content: "하이4",
    emotion: 1,
    created_date: new Date().getTime()
  },
]


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

export default App;

 

 

 

 4. dummyList 데이터 배열을 <DiaryList />컴포넌트에 prop으로 전달한다. 

 

 App.js 

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

const dummyList = [
  {
    id:1,
    author: "황혜인", 
    content: "하이1",
    emotion: 5,
    created_date: new Date().getTime()
  },
  {
    id:2,
    author: "짱구", 
    content: "하이2",
    emotion: 3,
    created_date: new Date().getTime()
  },
  {
    id:3,
    author: "철수", 
    content: "하이3",
    emotion: 3,
    created_date: new Date().getTime()
  },
  {
    id:4,
    author: "흰둥이", 
    content: "하이4",
    emotion: 1,
    created_date: new Date().getTime()
  },
]


function App() {
return (
    <div className="App">
<DiaryEditor /> 
<DiaryList diaryList={dummyList} /> // dummyList 데이터를 prop으로 전달한다.
    </div>
  );
};

export default App;

 

 

 

 5. DiaryList.js 컴포넌트에서 prop으로 데이터를 받아온다. 

 

 DiaryList.js 

// (1) prop으로 받음
const DiaryList = ({ diaryList }) => {
  console.log(diaryList) // (2) 콘솔로 확인
  return (
  <div className="DiaryList">
   <h2>일기 리스트</h2>
   <h4>{diaryList.length}개의 일기가 있습니다.</h4> // (3) 일기 개수 가져오기
    <div>
    {diaryList.map((it) => ( // (4) map으로 데이터 렌더링 하기
     <div>
      <div>작성자: {it.author}</div>
      <div>일기: {it.content}</div>
      <div>감정: {it.emotion}</div>
      <div>작성 시간(ms): {it.created_date}</div>
     </div>
    ))}
  </div>
 </div>
  );
  }
  
  export default DiaryList;

 

 

 

 6. 데이터가 undefined로 보내 질 경우를 defaultProps로 대비하기 

 

 DiaryList.js 

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

// undefined로 전달 될 경우를 대비해서 props의 기본값을 설정해줌
DiaryList.defaultProps={
diaryList:[] // 빈배열로 기본값 설정
}

  
  export default DiaryList;

 

 

 

 7. 에러 해결하기  "Warning: Each child in a list should have a unique "key" prop."  → 최상위 태그에 key={it.id} 를 추가해준다)

 

 DiaryList.js 

const DiaryList = ({ diaryList }) => {
  console.log(diaryList) //
  return (
  <div className="DiaryList">
   <h2>일기 리스트</h2>
   <h4>{diaryList.length}개의 일기가 있습니다.</h4> 
    <div>
    {diaryList.map((it) => ( 
     <div key={it.id}> // unique "key" prop 에러 해결 (최상위 태그에 적기)
      <div>작성자: {it.author}</div>
      <div>일기: {it.content}</div>
      <div>감정: {it.emotion}</div>
      <div>작성 시간(ms): {it.created_date}</div>
     </div>
    ))}
  </div>
 </div>
  );
  }


DiaryList.defaultProps={
diaryList:[] 
}

  
  export default DiaryList;

 

 

 

 8. 렌더하는 아이템들을 컴포넌트로 분리시켜보자. 

DiaryItem.js 컴포넌트를 생성한다.

 

 DiaryItem.js 

const DiaryItem = () => {
  return <div className="DiaryItem"></div>
};

export default DiaryItem;

 

 

 

 9. DiaryList.js 에 가서 아이템들을 <DiaryItem />컴포넌트로 바꾼다. 

 

 DiaryList.js 

import DiaryItem from './DiaryItem'; // DiaryItem 컴포넌트를 import한다.

const DiaryList = ({ diaryList }) => {
  console.log(diaryList) //
  return (
  <div className="DiaryList">
   <h2>일기 리스트</h2>
   <h4>{diaryList.length}개의 일기가 있습니다.</h4> 
    <div>
    {diaryList.map((it) => ( 
      <DiaryItem key={it.id} {...it}/> // 일기 하나 객체에 포함된 모든 데이터를 스프레드 연산자를 통해서 prop으로 전달해줌.
    ))}
  </div>
 </div>
  );
  }


DiaryList.defaultProps={
diaryList:[] 
}

  
  export default DiaryList;

 

 

 

 10. DiaryItem.js에 가서 prop으로 받아온다. 

 

 DiaryItem.js 

const DiaryItem = ({author, content, created_date, emotion, id}) => { // prop 받아오기
  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정 점수: {emotion}
        </span>
        <br />
        <span className="date">{new Date(created_date).toLocaleString()}</span> // newDate(Date객체)를 생성하고, 인자에 ms(created_date)를 넣어줌. Date객체에 있는 toLocaleString() 매서드를 사용하면 알아보기 쉬운 시간으로 바뀜.
      </div>
      <div className="content">{content}</div>
    </div>
  );
};

export default DiaryItem;

 

 

여기까지 하면 화면에 이렇게 나타난다.

 

 

 11. App.css으로 스타일링 하기 

 

 App.css 

/* List */

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

.DiaryList h2{
  text-align: center;
}

/* Item */
.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;
}

 

 

 

 완성본