Mock Data 🐾

ryuwisdom0_oΒ·2020λ…„ 11μ›” 12일
1

차근차근 React 🐾

λͺ©λ‘ 보기
8/10

1. mock data

  1. mock dataλž€?
  • mock: κ±°μ§“λœ, κ°€μ§œμ˜
  • μ΄λ¦„μ—μ„œ μ•Œ 수 μžˆλ“―μ΄ mock data λŠ” κ°€μ§œ 데이터, μƒ˜ν”Œ 데이터
  • 즉, μ‹€μ œ API μ—μ„œ λ°›μ•„μ˜¨ 데이터가 μ•„λ‹Œ ν”„λ‘ νŠΈμ•€λ“œ κ°œλ°œμžκ°€ ν•„μš”μ— μ˜ν•΄ μƒ˜ν”Œμš©μœΌλ‘œ λ§Œλ“  데이터
  1. mock dataκ°€ ν•„μš”ν•œ 이유
  • API κ°€ 아직 쀀비쀑인 경우

    :: ν”„λ‘œμ νŠΈ 진행 μ‹œ APIκ°€ λ‚˜μ˜€κΈ° 이전에 νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒμ΄ λ¨Όμ € λ‚˜μ˜€λŠ” κ²½μš°κ°€ λ§Žλ‹€. μ΄λŸ¬ν•œ κ²½μš°μ—λŠ” λ°±μ—”λ“œμ—μ„œ APIκ°€ λ‚˜μ˜¬ λ•ŒκΉŒμ§€ λ¬΄μž‘μ • κΈ°λ‹€λ¦¬λŠ” 게 μ•„λ‹ˆλΌ, mock dataλ₯Ό λ§Œλ“€μ–΄ 데이터가 λ“€μ–΄μ˜€λŠ” 상황을 미리 λŒ€λΉ„ν•˜κ³  UIκ°€ κΈ°νšμ— 맞게 κ΅¬ν˜„λ˜λŠ”μ§€ λ¨Όμ € 확인해야 ν•œλ‹€.

  • Backend μ™€μ˜ μ›ν™œν•œ μ˜μ‚¬μ†Œν†΅μ„ μœ„ν•¨
:: μ£Όκ³  λ°›λŠ” 데이터가 μ–΄λ–€ ν˜•νƒœμΈμ§€, key-value 값을 미리 맞좰볼 수 μžˆλ‹€.

2. mock data 관리 방법

data.js & data.json

πŸ“‚ data.js

🧷 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;


**_🧷 app.js_**
>```jsx
import React from 'react';
import DATA from 'data.js';

πŸ“‚ data.json

🧷 data.json μœ„μΉ˜

  • public 폴더 > data 폴더 > data.json

🧷 data.json

{
"data": [
{
"id": 1,
"name": "yang",
"age": 30
},
{
"id": 2,
"name": "kim",
"age": 29
}
]
}


**_🧷 app.js_**

> ```javascript
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
profile
Ryuwisdom

0개의 λŒ“κΈ€