HTML,CSS,JavaScript로 구현하였던 인스타그램 클론을 React와 Scss로 재구현해보면서 React의 이점을 느끼지 못했었다.
그 이유를 생각해보니, 백엔드로부터 API를 받아서 UI를 만드는것이 아닌 내가 직접 피드 사진, 게시글, 댓글 등을 하드코딩하고 있었기 때문이었다. 하지만, 이번에 mock data를 배우고, 이를 활용하여 여러개의 피드와 각각의 댓글 등을 구현해보니 컴포넌트의 정의인 "재사용 가능한 UI의 단위"의 의미를 알게 되었다.

Mock Data

mock data는 실제 API에서 받아온 데이터가 아닌 프론트엔드개발자가 샘플로 만들어 본 데이터이다. 따라서, 백엔드에서 API를 만들고 있을때 key-value값을 미리 확인하고 mock data와 백엔드 response형태를 맞추면 추후 수월하게 연결할 수 있다.

function MainSungjae(props) {
  const [feedList, setFeedList] = useState([]);

  useEffect(() => {
    fetch('/data/feedData.json', {
      method: 'GET',
    })
      .then(response => response.json())
      .then(data => {
        setFeedList(data);
      });
  }, []);

  return (
    <>
      <Nav />

      <main className="main">
        <div>
          {feedList.map(function (data, i) {
            const feed = feedList[i];
            return <Feed feed={feed} />;
          })}
        </div>

        <AsideSungjae />
      </main>
    </>
  );
}

이렇게 백엔드 API를 모방하여 json형태로 만든 data를 Main.js에서 fetch를 받고, Feed.js에게 Props로 데이터를 전달하고 이를 활용해서 하나의 Component를 가지고 다양한 UI를 구현할 수 있다.