TIL #28 - React mock data

Mock data란?

• Frontend 개발자가 API 연동 전 확인을 위해 만드는 샘플 데이터
  
  

Mock data가 필요한 이유

• API 연동 전 데이터가 화면에 제대로 보여지는지 확인할 수 있다.
• 데이터의 Key, Value를 미리 맞춰볼 수 있어 Backend와의 소통이 효율적으로 이루어질 수 있다.
  
  

fetch 함수를 이용한 mockData.json 적용법

1. public/data/mockData.json - json 데이터를 해당 경로에 추가

[
  {
    "id": 1,
    "userLink": "https://www.instagram.com/sarang/",
    "userId": "sarang",
    "content": "Wow"
  },
  {
    "id": 2,
    "userLink": "https://www.instagram.com/love.coffee/",
    "userId": "love.coffee",
    "content": "DM 확인 부탁드릴게요!"
  }
]

2. 해당 데이터가 필요한 컴포넌트의 state에 배열 형태의 값을 추가

constructor() {
  super();
  this.state = {
    mockDataList: []
    };
  }

3. constructor와 render 사이에 componentDidMount() 함수와 함수 내부에 fetch 함수 추가

componentDidMount() {
  fetch('http://localhost:3000/data/commentData.json', {
    method: 'GET'
  })
}

4. port number 3000이 바뀔 수 있어 api 주소에서 생략하는 것이 좋음. 또한 fetch는 method GET이 default이기 때문에 생략 가능

componentDidMount() {
  fetch('/data/commentData.json')
}

5. fetch된 데이터를 비동기 방식으로 불러올 때 어떻게 할 것인지 .then 이후에 설정
   HTTP 통신 규약에 의해 데이터는 string 형태로 오기 때문에 데이터를 json파일로 변환해준 후 배열에 추가해야 한다.

componentDidMount() {
  fetch('api 주소')
  .then (response => response.json())
}

6. 5번에서 변환한 데이터를 setState 함수를 이용해 mockDataList의 배열 형태의 value에 넣어준다.

componentDidMount() {
  fetch('api 주소')
  .then (response => response.json())
  .then (data => {
    this.setState({
      mockDataList: data
    });
  });
}

7. render 내부에서 필요한 데이터를 this.state.mockDataList로 불러와 사용한다.

{mockDataList.map(mockDataList => {
  return (
    <li key={this.state.mockDataList.id} className="comment_written">
      <span className="user_id">{this.state.mockDataList.userId}</span>
      <span className="comment_text">{this.state.mockDataList.content}</span>
    </li>
    )
  }
)}