리스트 렌더링 (조회)

리스트 객체를 순회하며 차례대로 화면에 랜더링하기

1. 일기 객체를 보여줄 DiaryList 컴포넌트 생성 및 export
   & app.js 에서 import

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

export default DiaryList;

// App.js
import DiaryList from "./DiaryList";

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

2. 일기 리스트(dummy)를 DiaryList 컴포넌트에 props로 전달

// App.js
const dummyList = [
  {
    id: 1,
    author: "조성원",
    content: "내용1",
    emotion: 3,
    // 시간 객체 생성자 사용
    // new Date()만 적으면 현재 시간을 기준으로 생성됨
    created_date: new Date().getTime(),
  },
  ...
  {
    id: 4,
    author: "아빠",
    content: "내용4",
    emotion: 1,
    // 시간 객체 생성자 사용
    // new Date()만 적으면 현재 시간을 기준으로 생성됨
    created_date: new Date().getTime(),
  },
];

function App() {
  return (
    <div className="App">
      <DiaryEditor />
      {/* 생성한 dummyList를 diaryList에 prop으로 전달 */}
      <DiaryList dummyList={dummyList} />
    </div>
  );
}

• DiaryList.js에서 dummyList prop 전달받기

// DiaryList.js
const DiaryList = ({ dummyList }) => {
  console.log(dummyList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <div>일기 개수 : {dummyList.length}</div>
    </div>
  );
};

export default DiaryList;

3. map 함수 사용해서 리스트 객체 순회하며 랜더링

const DiaryList = ({ dummyList }) => {
  console.log(dummyList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <div>일기 개수 : {dummyList.length}</div>
      <div>
        {dummyList.map((lst) => (
          <div>
            <div>작성자 : {lst.author}</div>
            <div>내용 : {lst.content}</div>
            <div>감정 : {lst.emotion}</div>
            <div>작성시간 : {lst.created_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DiaryList;

• map함수 사용법
  exList.map(lst => func());
  순회할 전체 리스트.map(리스트의 각 요소 => 각 요소로 수행할 func());

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

• 주의 : map 함수 사용 시 리스트에 있는 각각 자식요소들은 반드시 고유한 key prop을 받아야함
  - 자식요소에 key값으로 사용할 수 있는 고유한 값이 없다면, map의 두 번 째 요소인 idx 사용 가능
  - 단, 배열 요소에 변경이 있을 경우(수정, 삭제, 추가 등) react에서 문제가 생길 수 있음
  

const DiaryList = ({ dummyList }) => {
  console.log(dummyList);
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <div>일기 개수 : {dummyList.length}</div>
      <div>
        {dummyList.map((lst) => (
          // 자식요소 가장 최상위 태그에 key 전달
          <div key={lst.id}>
            <div>작성자 : {lst.author}</div>
            <div>내용 : {lst.content}</div>
            <div>감정 : {lst.emotion}</div>
            <div>작성시간 : {lst.created_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

<div>
        {dummyList.map((lst, idx) => (
          // 자식요소 가장 최상위 태그에 key 전달
          <div key={lst.idx}>
            <div>작성자 : {lst.author}</div>
            <div>내용 : {lst.content}</div>
            <div>감정 : {lst.emotion}</div>
            <div>작성시간 : {lst.created_date}</div>
          </div>
        ))}
      </div>

• 주의 : dummyList가 undefined로 전달될경우

// defaultPoprs : undefined으로 전달될 가능성이 있는 props들의 기본값 설정
DiaryList.defaultProps = {
  dummyList: [], // dummyList의 기본값을 빈 배열로 설정하여 undefined로 prop이 전달될 경우 에러 방지
};

4. 일기 영역을 DiaryItem.js 컴포넌트로 분리

• DiaryList.js 자체로 다이어리 전체 내용을 전달하려면 해당 js안에 랜더링, 수정, 삭제 등 모든 요소가 포함되어 있어야함.
• 한 페이지에 너무 많은 내용을 담지 않기 위해 일기 본문을 랜더링 하는 컴포넌트 분리

// DiaryList.js
import DiaryItem from "./DiaryItem";

const DiaryList = ({ dummyList }) => {
  // console.log(dummyList);
  dummyList.map((lst) => {
    console.log(lst);
  });
  return (
    <div className="DiaryList">
      <h2>일기 리스트</h2>
      <div>일기 개수 : {dummyList.length}</div>
      <div>
        {dummyList.map((lst, idx) => (
          // 자식요소 가장 최상위 태그에 key 전달
          // 일기 하나 객체에 포함된 모든 데이터를 전개구문을 통해 전달 -> lst에 포함된 모든 데이터가 DiaryItem에 prop으로 전달됨
          <DiaryItem key={lst.id} {...lst} />
        ))}
      </div>
    </div>
  );
};

// defaultPoprs : undefined으로 전달될 가능성이 있는 props들의 기본값 설정
DiaryList.defaultProps = {
  dummyList: [], // dummyList의 기본값을 빈 배열로 설정하여 undefined로 prop이 전달될 경우 에러 방지
};

export default DiaryList;

• map 함수 내에서 순회되는 각 lst는 아래와 같음
• {...lst}를 사용하면 배열의 모든 요소를 한 번에 전달할 수 있음.
  

// DiaryItem.js
const DiaryItem = ({ author, content, emotion, created_date, id }) => {
  return (
    <div className="diaryItem">
      <div className="info">
        <div>
          작성자 : {author} | 감정 : {emotion}
        </div>
        {/* 시간 객체 생성 시, 아무것도 전달하지 않으면 현재 시간 기준 / 인자로 ms를 전달하면 ms가 가지고 있는 시간을 기준으로 Date객체 생성
        Date객체는 .toLocaleString 이라는 메소드 사용 가능 -> 사람이 알아볼 수 있는 시간으로 변경 */}
        <br />
        <div className="date">
          작성시간 : {new Date(created_date).toLocaleString()}
        </div>
        <div>내용 : {content}</div>
      </div>
    </div>
  );
};

export default DiaryItem;