Mock Data

• mock: 거짓된, 가짜의
• 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터
• 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인

-> Backend 와의 소통이 효율적으로 이루어질 수 있다는 장점

Mock Data 관리하는 방법

js file

data.js

• 배열 데이터를 변수에 담고 필요한 컴포넌트에서 import
• import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성

const COMMENT = [
  {
    id: 1,
    userName: 'wecode',
    content: 'Welcome to world best coding bootcamp!',
    isLiked: true
  }
];

export default COMMENT;

comment.js

import React, { Component } from 'react';
import COMMENT from './commentData';

class Comment extends Component {
  constructor() {
    super();
    this.state = {
      commentList: [],
      commentValue: ''
    };
  }

  componentDidMount() {
    this.setState({
      commentList: COMMENT
    });
  }

  handleCommentValue = e => {
    this.setState({
      commentValue: e.target.value
    });
  };

	addComment = e => {
    e.preventDefault();
    const { commentList, commentValue } = this.state;
    this.setState({
      commentList: [
        ...commentList,
        {
          id: commentList.length + 1,
          userName: 'wecode',
          content: commentValue,
          isLiked: false
        }
      ],
      commentValue: ''
    });
  };

render() {
    const { commentList, commentValue } = this.state;

    return (
      <div className="comment">
        <h1>Main Page</h1>
        <ul>
          {commentList.map(comment => {
            return (
              <CommentList
                clickEvent={this.changeColor}
                name={comment.userName}
                comment={comment.content}
              />
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Comment;

json 파일

• 실제 API 에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법
• data.json 위치 - public 폴더 > data 폴더 > data.json
• 해당 주소를 API 주소로 생각하고 fetch 함수와 http GET method 를 사용해 실제 API 에서 데이터를 받아오는 것처럼 코드를 작성

data.json

{
 "data": [
   {
     "id": 1,
     "userName": "wecode",
     "content": "Welcome to world best coding bootcamp!",
     "isLiked": true
   }
 ]
}

comment.js

import React, { Component } from 'react';

class Comment extends Component {
  constructor() {
    super();
    this.state = {
      commentList: [],
      commentValue: ''
    };
  }

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

 render() {
    const { commentList, commentValue } = this.state;

    return (
      <div className="comment">
        <h1>Main Page</h1>
        <ul>
          {commentList.map(comment => {
            return (
              <CommentList
                clickEvent={this.changeColor}
                name={comment.userName}
                comment={comment.content}
              />
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Comment;