TC - 6번일지 (상태관리 3)

14. PostList rendering

5번일지에서 body, author이 객체로 잘 들어온것을 확인했고, 이전 상태를 바탕으로 새로운 상태를 만들어 새로운 배열도 확인 했으니 이제 그 데이터를 렌더링만 해주면 된다. 우선 map()을 이용할거다.

아래 사진처럼 하드 코딩이 아니라 동적으로 표현해줄것임.

✍ PostList.jsx

import { useState } from "react";

import Post from "./Post";
import NewPost from "./NewPost";
import Modal from "./Modal";
import classes from "./PostList.module.css";

function PostList({ isPosting, onStopPosting }) {
  const [posts, setPosts] = useState([]);

  function addPostHandler(postData) {
    setPosts((existingPosts) => [postData, ...existingPosts]);
  }

  return (
    <>
      {isPosting && (
        <Modal onClose={onStopPosting}>
          <NewPost onCancel={onStopPosting} onAddPost={addPostHandler} />
        </Modal>
      )}
      <ul className={classes.posts}>
        {posts.map((post) => (
          <Post author={post.author} body={post.body} />
        ))}
      </ul>
    </>
  );
}
export default PostList;

간단히 설명하자면, posts.map에서 각 post 객체를 순회하면서, Post 컴포넌트에 전달할 author와 body 프로퍼티 값을 추출하여 Post 컴포넌트에 전달함. 매개변수 post는 배열 posts의 각 요소를 순회하면서 해당 요소가 현재 실행 중인 요소임을 나타내는 값이고, 이 값을 통해 author와 body 프로퍼티 값을 추출하여 Post 컴포넌트에 전달하는것.

14.1 unique key

배열을 JSX 요소 배열로 매핑할 때는 'key'라는 특수 프로퍼티를 JSX 요소에 추가해야 한다. 그리고 이 key에 추가할 프로퍼티들은 각 컴포넌트들(post) 마다 고유해야 한다.

✍ PostList.jsx

<Post key={post.body} author={post.author} body={post.body} />

즉, 새롭게 추가할 포스팅을 렌더링 하는 작업은 posts 상태관리, map 함수 이 두가지로 처리했다.