Index
- mock data란? mock data가 필요한 이유
- mock data 관리하는 두 가지 방법
2-1. data.js
2-2. data.json
1. mock data
1-1. mock data란?
- mock: 거짓된, 가짜의
- 이름에서 알 수 있듯이 mock data, 혹은 mock-up data란 가짜 데이터, 혹은 샘플 데이터 정도로 해석할 수 있습니다. 즉, 실제 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말합니다.
1-2. mock data가 필요한 이유
- UI 구성, map 함수 사용
- API가 아직 준비 안 된 경우
- 프로젝트 진행 시 많은 경우 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많습니다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 예상하고 들어올 경우에 UI가 계획대로 잘 나오는지 확인해야 합니다.
- 실제 예시는 아래에서 살펴보도록 하겠습니다.
2. mock data 관리하는 두 가지 방법
- mock data를 만들어 관리하고 사용하는 방법에는 두 가지가 있습니다.
- 첫 째는 js 파일에 데이터를 담아 그것을 import해서 사용하는 경우,
- 두 번째는 실제 API에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법
- 우선 첫 번째 방법부터 살펴보도록 하겠습니다.
2-1. data.js
2-1-1. data.js 위치
- 해당 컴포넌트 바로 옆에 만들어서, 바로 접근하기 쉽게.
2-1-2. data.js
const SlickData = [
{
id: 1,
skills: "HTML"
},
{
id: 2,
skills: "CSS"
},
{
id: 3,
skills: "JavaScript"
},
{
id: 4,
skills: "React"
},
{
id: 5,
skills: "React Native"
},
{
id: 6,
skills: "Angular"
},
{
id: 7,
skills: "Vue"
},
{
id: 8,
skills: "Redux"
},
{
id: 9,
skills: "TypeScript"
}
];
export default SlickData;
2-1-3. App.js
import React from 'react';
import DATA from 'data.js';
2-2. data.json
2-2-1. data.json 위치
- public 폴더 > data 폴더 > data.json
2-2-2. data.json
{
"data": [
{
"id": 1,
"name": "yang",
"age": 30
},
{
"id": 2,
"name": "kim",
"age": 29
}
]
}
2-2-3. App.js
import React, { Component } from 'react'
export class Main extends Component {
constructor(){
super();
this.state = {
data: []
};
}
componentDidMount = () => {
fetch('http://localhost:3002/data/data.json')
.then(res => res.json())
.then(res => {
console.log("firstly: ", res.data)
this.setState({
data: res.data
}, () => {
console.log("secondly: ", this.state.data)
})
})
}
render() {
console.log("thirdly: " , this.state.data)
return (
<div>
hello
</div>
)
}
}
export default Main
Assignment