UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우가 많습니다. 프론트엔드 개발자는 API가 나오지 않더라도 mock data, 즉 가짜 데이터를 만들어서 미리 내가 만든 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행할 수 있습니다. mock data를 잘 만들어 둔다면 백엔드와 실제 연결할 때도 수월하게 작업할 수 있을 뿐더러, 받기 원하는 자료의 형태가 구체적으로 특정되기 때문에 소통에도 도움이 됩니다.
1. Mock Data
1-1. mock data란?
- mock: 거짓된, 가짜의
- 이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있습니다.
- 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말합니다.
1-2. mock data가 필요한 이유
-
API 가 아직 준비중인 경우
:: 프로젝트 진행 시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많습니다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 합니다.
:: 특히나 프로젝트를 진행하는 경우 Backend API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.
-
Backend 와의 소통이 효율적으로 이루어질 수 있습니다.
:: 주고 받는 데이터가 어떤 형태인지, key-value 값을 미리 맞춰볼 수 있습니다.
2. mock data 관리하는 두 가지 방법
2-1. data.js
-
첫번째 방법은
.js파일로 데이터를 분리하는 방법입니다. -
배열 데이터를 변수에 담고 필요한 컴포넌트에서
import해서 사용합니다. -
.js파일은 데이터를import하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성합니다. -
data.js
const COMMENT = [
{
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
}
];
export default COMMENT;Comment.js(componentDidMount( )에서 import한 COMMENT 활용)
import React, { Component } from 'react';
import CommentList from './CommentList/CommentList';
import COMMENT from './commentData';
import './Comment.scss';
class Comment extends Component {
constructor() {
super();
this.state = {
commentList: [],
commentValue: ''
};
}
componentDidMount() {
this.setState({
commentList: COMMENT
});
}
handleCommentValue = e => {
this.setState({
commentValue: e.target.value
});
};
addComment = e => {
e.preventDefault();
const { commentList, commentValue } = this.state;
this.setState({
commentList: [
...commentList,
{
id: commentList.length + 1,
userName: 'wecode',
content: commentValue,
isLiked: false
}
],
commentValue: ''
});
};
render() {
const { commentList, commentValue } = this.state;
return (
<div className="comment">
<h1>Main Page</h1>
<ul>
{commentList.map(comment => {
return (
<CommentList
clickEvent={this.changeColor}
name={comment.userName}
comment={comment.content}
/>
);
})}
</ul>
<div className="commentInput">
<form onSubmit={this.addComment}>
<input
onChange={this.handleCommentValue}
type="text"
placeholder="enter comment"
value={commentValue}
/>
</form>
<button className="addCommentBtn" onClick={this.addComment}>
Click
</button>
</div>
</div>
);
}
}
export default Comment;
2-2. data.json
- 두 번째는 실제 API 에서 보내주는 데이터 형식에 맞게
json파일에 데이터를 담아fetch함수를 사용해 데이터를 받아오는 방법입니다. - fetch 함수 사용법
- data.json 위치 -
public폴더 >data폴더 >data.json data.json
{
"data": [
{
"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
}
]
}-
해당 데이터는
http://localhost:3000/data/data.json주소를 입력하여 확인해볼 수 있습니다. -
해당 주소를 API 주소로 생각하고
fetch함수와 httpGETmethod 를 사용해 실제 API 에서 데이터를 받아오는 것처럼 코드를 작성합니다. -
App.js
import React, { Component } from 'react';
import CommentList from './CommentList/CommentList';
import './Comment.scss';
class Comment extends Component {
constructor() {
super();
this.state = {
commentList: [],
commentValue: ''
};
}
componentDidMount() {
fetch('http://localhost:3000/data/commentData.json', {
method: 'GET'
})
.then(res => res.json())
.then(res => {
this.setState({
commentList: res.data
});
});
}
render() {
const { commentList, commentValue } = this.state;
return (
<div className="comment">
<h1>Main Page</h1>
<ul>
{commentList.map(comment => {
return (
<CommentList
clickEvent={this.changeColor}
name={comment.userName}
comment={comment.content}
/>
);
})}
</ul>
<div className="commentInput">
<form onSubmit={this.addComment}>
<input
onChange={this.handleCommentValue}
type="text"
placeholder="enter comment"
value={commentValue}
/>
</form>
<button className="addCommentBtn" onClick={this.addComment}>
Click
</button>
</div>
</div>
);
}
}
export default Comment;
