[React] Mock Data

Mock Data란?

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

사용하는 이유

• 프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성이 안되었을 경우에 백엔드 API가 완성 될 때 까지 기다리는 게 아니라 mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고, 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인하기 위해

MockData의 형식

mock data의 형식은 ex.json으로 되어있다.
json이란, JavaScript Object Notation의 약자이고,
key : value 의 객체형태이고, 백엔드와의 데이터 통신을 위해 사용하는 형식이다.

mock data는 상수데이터와 만드는 방식은 같지만, 불러오는 방식은 다르다.

feedsData.json
[
{
"id": 1,
"userName": "jejus",
"content": "A - men",
"isLiked": true
},
{
"id": 2,
"userName": "g-dragon",
"content": "i miss jenny",
"isLiked": false
},
{
"id": 3,
"userName": "jayPark",
"content": "원소주 많이 사랑해주세요.",
"isLiked": false
},
{
"id": 4,
"userName": "Son",
"content": "i'm world class.",
"isLiked": false
},
{
"id": 5,
"userName": "Bob Marley",
"content": "i like ballad",
"isLiked": false
},
{
"id": 6,
"userName": "Gwang hyun",
"content": "i'm so tired.",
"isLiked": false
}
]

function componentDidMount 를 통해서 fetch 함수로 데이터를 받아 사용.
화면이 랜더되고 ComponentDidMount가 되면서 fetch함수를 통해 MockData에서 데이터를 가져오고 setState가 되면서 state 값 안에
데이터를 저장한다.

const CommentList = () => {
const [commentList, setCommentList] = useState([]);
useEffect(() => {
fetch('/data/commentData.json')
.then(res => res.json())
.then(data => {
setCommentList(data);
});
});

return (

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

);
};