props 뽀개기 숙제 해설

Romuru·2022년 11월 28일

Props React 하지만 뽀개지는건 언제나

FE tech

목록 보기

3/3

https://github.com/PastelBlue4/blog_post_react_code
모든 예제코드는 직접 작성했습니다. Write by @Romuru

뽀롭수

저번에 props 뽀개기 글에서 리팩토링 해보면서 함수로

자식과 부모 component사이에서 부모 > 자식 뿐만 아니라

자식 > 부모에게로 props를 전달해주는 예제코드를 적어놨었다.

이제 슬슬 같이 해보자

충분히 고민할 시간을 줬다고 생각한다. ~~(2주를 딴거 했으니)~~

Before

// BeforePostPage.js
import { useState } from "react";

const data = [
  {
    id: "1",
    comment: "first data",
  },
  {
    id: "2",
    comment: "second data",
  },
  {
    id: "3",
    comment: "third data",
  },
];

function BeforePostPage() {
  const [postItem, setPostItem] = useState();

  const getData = () => {
    setPostItem(data);
  };

  return (
    <>
      {postItem &&
        postItem.map((postData) => (
          <div>
            <h2>{postData.id}</h2>
            <span>{postData.comment}</span>
          </div>
        ))}

      <button onClick={getData}> 데이터 받아오기 </button>
    </>
  );
}
export default BeforePostPage;

코드 자체는 굉장히 간단하다.

data는 임시로 더미데이터를 선언해둔 것이고, 실제 의미있게 쓰일려면 외부 api나

데이터 베이스에서 요청하는 코드일 것이다.

버튼을 눌러 데이터 요청 로직인 getDate 함수를 수행한 결과값을 [postItem, setPostItem]로 useState로 담아서 저장한다.

그 후에


 {postItem &&
        postItem.map((postData) => (
          <div>
            <h2>{postData.id}</h2>
            <span>{postData.comment}</span>
          </div>
        ))}

부분에서는 postItem이 성공적으로 받아와졌으면,

데이터를 h1태그와 span태그에 담아서 보여준다.

결과는

데이터를 성공적으로(초라하지만..) 받아왔다. 와~~

이제 컴포넌트를 나눠보자.

After

우선 어떤 목적을가지고 나눌지 생각을 먼저 해보자.

지금은 통신은 커녕 미리 준비되어있는 데이터를 가져와서 호출하는 로직이 짧지만

좀 더 상세하게 백엔드/API/DB와 소통하려면 코드가 컴포넌트를 분리해야할 만큼 충분히 길어질 것이다.

우리는 그런 상황을 가정하고 리팩토링 해보자.

PostPage


import { useState } from "react";
import DataFetch from "./DataFetch";

function PostPage() {
  const [postItem, setPostItem] = useState();

  const getData = (data) => {
    setPostItem(data);
  };

  return (
    <>
      {postItem &&
        postItem.map((postData, index) => (
          <div key={index}>
            <h2>{postData.id}</h2>
            <span>{postData.comment}</span>
          </div>
        ))}
      <DataFetch getData={getData} />
    </>
  );
}
export default PostPage;

인자로 받은 data를 setPostItem에 할당하는getData 함수를 작성하고, DataFetch 컴포넌트에 전달해줬다.

여기서 왜 굳이 함수로 만들고 DataFetch 컴포넌트에 전달해야 하는지 모르겠다면,

Props 뽀개기를 먼저 보고 오자.

DataFetch.js


/// DataFetch.js
function DataFetch({ getData }) {
 //data code 생략

  const onClick = () => {
    getData(data);
  };

  return (
    <>
      <button onClick={onClick}> 데이터 받아오기 </button>
    </>
  );
}
export default DataFetch;