이름에서 알 수 있듯이 Mock Data는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다. 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말한다.
.js
파일로 데이터를 분리하는 방법이다..js
파일은 데이터를 import하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성한다.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;
render(){
return(
<ul>
{
COMMENTLIST.map(comment => {
<li key={id}>
<b>{comment.userName}</b>
<span>{comment.content}</span>
<button like={comment.isLiked}><img/></button>
</li>
})
}
</ul>
)
}
json
파일에 데이터를 담아 fetch
함수를 사용해 데이터를 받아오는 방법이다.public
폴더 > data
폴더 > data.json
componentDidMount() {
fetch('http://localhost:3000/data/commentData.json', {
method: 'GET'
})
.then(res => res.json())
.then(res => {
this.setState({
commentList: res.data
});
});
}