REACT Mock data 활용하기

-가짜 데이터라는 뜻이다.
-실제 api데이터가 아닌 테스트를 하기 위해 샘플로 만들어진 데이터이다.

Mock data 관리

1.data.js

• js 파일에 데이터를 담아 import해 사용하는 방법

const data = [
  {
  id : 1,
  fruit : "tomato"
  },
  {
  id : 2,
  fruit : "banana"
  },
  {
  id : 3,
  fruit : "grape"
  },
  {
  id : 4,
  fruit : "watermelon"
  },
  {
  id : 5,
  fruit : "apple"
  }
];
export default data;

import data from 'data.js';

2.data.json

• data.json url을 fetch함수로 호출해 응답을 state로 저장하여 사용하는 방법
• public 폴더 > data 폴더 > data.json

data.json

{
"data" : [
    {
     "id" : 1,
     "alphabet" : "a",
     "age" : 20
    },
    {
     "id" : 2,
     "alphabet" : "b",
     "age" : 28
    },
    {
     "id" : 3,
     "alphabet" : "c",
     "age" : 14
    },
  ]
}

App.js

export class App extends Component {
  constructor() {
    super();
    this.state = {
      data: {},
    };
  }
  componentDidMount() {
    fetch("http://localhost:3000/data/data.json")
      .then((response) => response.json())
      .then((response) => {
        this.setState({
          data: response.data,
        });
      });
  }
  render() {
  console.log(this.state.data)
    return (
      <div>
        hello
      </div>
    )
  }
 }
export default App