(React) Mock Data

mock data

1차 프로젝트를 하면서 목데이터의 중요성을 느끼고
벨로그를 작성하고있다..

그냥 혼자 하드코딩으로 페이지를 만들때처럼 내가 원하는대로 맡은 페이지를 코딩하고있었다 이렇게 작성하고 백앤드한테 API를 받고나선 멘붕이 왔다.....내가 작성한 코드를 수정 OR 갈아엎어야하는 상황이 왔다

이래서 백앤드랑 프론트랑 소통을 많이 해야하는구나..

목데이터 혹은 목 업 데이터는
실제 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말한다 이걸 이용하여
미리 데이터가 들어올 자리에 가짜 데이터를 넣어서 틀을 만드는것이다.

mock data를 사용하는 방법에는 두 가지가 있다.
1) js 파일에 데이터를 담아 그것을 import해서 사용하는법

2)실제 API에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법

나는 2번째 방법을 이용하여 목데이터를 만들었다..

data.json

data.json 위치
public 폴더 > data 폴더 > data.json

"data": [
    {
      "id": 1,
      "name": "minkyu",
      "age": 29
    },
    {
      "id": 2,
      "name": "park",
      "age": 30
    }
  ]
}

App.js

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