[TIL] React MockData 활용

Mock Data 란 ?

실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 사용하는 데이터를 말한다.

Mock Data가 필요한 이유

프로젝트 진행시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많다. 이러한 경우에는 백엔드에서 API가 나올 때까지 기다리는 것이 아니라, Mock Data 를 만들어 데이터가 들어오는 상활을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인 하는 필요성이 있다. 주고받는 데이터가 어떤 형태인지 Key-Value 값을 미리 맞춰볼수 있다.

Mock Data 관리하는 두가지 방법

data.js

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

data.js

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;

comment.js

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

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 className="commentInput">
          <form onSubmit={this.addComment}>
            <input
              onChange={this.handleCommentValue}
              type="text"
              placeholder="enter comment"
              value={commentValue}
            />
          </form>
          <button className="addCommentBtn" onClick={this.addComment}>
            Click
          </button>
        </div>
      </div>
    );
  }
}

export default Comment;

---

data.json

data.json 방법은 실제 API레서 보내주는 데이터 형식에 맞게 json파일에 데이터를 담아 fetch함수를 사용하여 데이터를 받아오는 방법이다.

{
  "data": [
    {
      "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
    }
  ]
}

해당 데이터는 http://localhost:3000/data/data.json주소를 입력하여 확인 해볼수 있다. 해당 주소를 API 주소로 생각하고 fetch함수 와 httpgetmethod 를 사용해 실제 API에서 데이터를 받아오는 것처럼 코드를 작성할수 있다.

import React, { Component } from 'react';
import CommentList from './CommentList/CommentList';
import './Comment.scss';

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 className="commentInput">
          <form onSubmit={this.addComment}>
            <input
              onChange={this.handleCommentValue}
              type="text"
              placeholder="enter comment"
              value={commentValue}
            />
          </form>
          <button className="addCommentBtn" onClick={this.addComment}>
            Click
          </button>
        </div>
      </div>
    );
  }
}

export default Comment;