[Westagram] 002. Mock Data

Mock Data란

이름에서 알 수 있듯이 Mock Data는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다. 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말한다.

Mock Data관리하는 방법

data.js

• 첫번째 방법은 .js파일로 데이터를 분리하는 방법이다.
• 배열 데이터를 변수에 담고 필요한 컴포넌트에서 import해서 사용한다.
• .js파일은 데이터를 import하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성한다.

const COMMENT = [
  {
    id: 1,
    userName: 'wecode',
    content: 'Welcome to world best coding bootcamp!',
    isLiked: true
  },
  {
    id: 2,
    userName: 'joonsikyang',
    content: 'Hi there.',
    isLiked: false
  },
  {
    id: 3,
    userName: 'jayPark',
    content: 'Hey.',
    isLiked: false
  }
];

export default COMMENT;

render(){
  return(
    <ul>
    {
      COMMENTLIST.map(comment => {
        <li key={id}>
          <b>{comment.userName}</b>
          <span>{comment.content}</span>
    	  <button like={comment.isLiked}><img/></button>
        </li>
      })
    }
    </ul>
  )
}

data.json

• 두 번째는 실제 API 에서 보내주는 데이터 형식에 맞게 json파일에 데이터를 담아 fetch함수를 사용해 데이터를 받아오는 방법이다.
• data.json 위치 - public폴더 > data폴더 > data.json

componentDidMount() {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET'
    })
      .then(res => res.json())
      .then(res => {
        this.setState({
        commentList: res.data
    });
  });
}