Mock Data

상수 데이터

상수 데이터란?

• 이름 그대로 변하지 않는 데이터. 즉, 정적인 데이터
• UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다.

상수 데이터를 사용하는 이유

• 반복되는 UI를 하드코딩으로 일일이 만들어두게 되면, 코드가 길어져서 가독성에 좋지 않고, 수정이 필요할 시 해당하는 부분을 찾기 힘들어 추후 유지보수가 힘들어질 수 있습니다.
• 이런 반복되는 UI를 상수 데이터 + Array.map() 함수의 조합을 이용해서 간결하게 표현할 수 있습니다.
• 추후, 수정할 필요가 생겼을 경우에는 상수 데이터에서 해당하는 부분의 내용만 변경해주면 되기에 유지보수가 용이해집니다.

mock data

mock data란?

• mock : 거짓된, 가짜의
• 이름에서 알 수 있듯이 mock data는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있습니다.
• 즉, 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말합니다.

mock data를 사용하는 이유

• 프론트엔드 개발을 진행하려하는데 필요한 백엔드 API가 완성이 안되었을수도 있습니다.
• 이러한 경우에는 백엔드에서 API가 완성될때까지 무작정 기다리는게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인해야 합니다.
• 특히나 프로젝트를 진행하는 경우 백엔드 API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.
• 또한 mock data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, key-value값을 확인하고 미리 mock data와 백엔드 response의 형태를 맞춰보면서 개발을 진행한다면 추후 실제 API를 훨씬 수월하게 연결 할 수 있습니다.

commentData.json

[
  {
    "id": 1,
    "userName": "wecode",
    "content": "Welcome to world best coding bootcamp!",
    "isLiked": true
  },
  {
    "id": 2,
    "userName": "joonsikyang",
    "content": "Hi there.",
    "isLiked": false
  },
  {
    "id": 3,
    "userName": "jayPark",
    "content": "Hey.",
    "isLiked": false
  }
]

mock data는 백엔드 API를 모방하기에 실제 백엔드 API에서 응답값의 형태인 json 파일로 만들어줘야합니다.

http://localhost:3000/data/commentData.json를 API 주소로 생각하고 http 요청을 통해서 API 요청을 보내고 응답을 받아보겠습니다.

commentList.js

import React, { useState, useEffect } from 'react';
import Comment from './Comment/Comment';
import './CommentList.scss';

function CommentList() {
  const [commentList, setCommentList] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
    })              // 예시코드에서는 이해를 돕기 위해 명시적으로 기입해뒀습니다.
      .then(res => res.json())
      .then(data => {
        setCommentList(data);
      });
  },[])

  return (
    <div className="commentList">
      <h1>Main Page</h1>
      <ul>
        {commentList.map(comment => {
          return (
            <Comment
              key={comment.id}
              name={comment.userName}
              comment={comment.content}
            />
          );
        })}
      </ul>
    </div>
  );
}

export default CommentList;

• vascript에서 http 요청을 보낼때는 fetch함수를 사용합니다.
• fetch 함수는 첫번째 인자로 http 요청을 보낼 API주소, 두번째 인자로 요청을 보낼때의 옵션들을 객체형태로 받습니다.
• 우리가 json 파일을 저장해 둔 주소를 API주소로, 그리고 데이터를 가져오기 위한 요청 GET method를 활용해 요청을 보냈습니다.
• 데이터를 요청하는 시점을 특정해야하는데, 여기서는 useEffect 훅을 활용하여 컴포넌트가 렌더링 된 이후 데이터를 요청합니다. 요청이 성공적으로 완료되면 setCommenList 함수를 사용하여 commentList state를 응답 받은 값으로 바꿔줍니다.