React에서 리스트 사용하기

📌 우리가 작성한 일기를 배열에 저장하고 리스트를 렌더링 해보자

*React에서 배열은 게시글, 피드, 리스트를 다루는 데에 많이 사용됨

---

✏️ 일기 리스트 컴포넌트 만들기
파일 : DiaryList.js

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

export default DiaryList;

• 컴포넌트 추가 후에 App.js에서 import 해오는 거 잊지 말기!

---

✏️ 임시 배열로 리스트 렌더링 하는 것 먼저 연습하기
목표 : 일기 목록 배열을 DiaryList 컴포넌트에 prop으로 전달해서 그 데이터를 렌더링

• 일기 dummyList 만들어주기

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

const dummyList = [
{
  id:1,
  author:"hailee",
  content:"hi",
  emotion:5,
  created_date: new Date().getTime(), // 현재 시간을 ms로 반환
},
... // 똑같은 구조의 일기 객체 3개 만들어줌
]

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

export default App

• DiaryList 컴포넌트에서 prop으로 받아주고 확인하기

// DiaryList.js
const DiaryList = ({diaryList}) => {
    console.log(diaryList)
    return <div className="DiaryList">
        <h2>일기 리스트</h2>
    </div>
}

• 콘솔에 출력된 diaryList는 우리가 <DiaryList diaryList={dummyList}/>로 넘겨준 일기가 담긴 배열
  

*아래처럼 prop을 그대로 출력했을 때는 diaryList라는 key에 배열을 vaule로 갖는 객체가 출력됨(prop 그 자체!)

const DiaryList = (prop) => {
console.log(prop)
}

---

📌 map으로 배열의 각 요소의 속성들 꺼내서 <div></div> 안에 담고 화면에 그려주기

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

• 각 일기 요소의 최상위 태그인 div에 <div key={item.id}>로 고유한 key값을 만들어줌(Each child should have a unique key prop 에러 해결)

  *요소마다 고유한 id가 없다면 배열의 map의 콜백함수의 두 번째 인자인 배열의 index를 unique key값으로 사용해도 될 것 같지만, 나중에 일기 요소를 삭제, 수정, 추가해서 index의 순서가 바뀌었을 때 문제가 될 수 있음. => 지양하기!

---

❓만약에 DiaryList 컴포넌트에 prop이 제대로 전달되지 않았다면? (diaryList={undefined}라면?)

// DiaryList.js
DiaryList.defaultProps={
    diaryList: [],
}

• defaultProps 를 이용해서 혹시나 컴포넌트에 데이터가 전달되지 않았을 때 사용할 기본값을 설정해주면 에러를 방지할 수 있다!

---

✏️ 일기 리스트에 렌더링되는 각각의 일기 아이템 별도의 파일로 분리시켜주기
파일 : DiaryItem.js

const DiaryItem = ({id, author, content, emotion, created_date}) => {
    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>
    </div>
}

export default DiaryItem;

파일 : DiaryList.js

import DiaryItem from './DiaryItem.js'

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

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

{...item}은 diaryList 배열의 각 요소인 객체({id:1, author:"hailee", content:"hi",..})를 펼쳐서 DiaryItem에 prop으로 전달해준 것!
=> DiaryItem이 DiaryList.map에 의해 호출될 때 마다 각각의 요소가 갖는 속성들이 prop으로 넘어가고 그에 맞는 DiaryItem이 렌더링 됨

---

Studying...

https://inf.run/qAuJ
한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood