UXUI 디자인을 할 때 디자인 안에 실제 데이터가 아닌 가상의 데이터를 넣어 디자인을 하듯이, 프론트엔드 개발자 역시 API가 나오지 않은 상황에서 mock data를 만들어 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행한다. 백엔드와 실제로 연결할 때도 수월하게 작업할 수 있고, 내가 받아야 할 자료의 형태를 예상할 수 있기 때문에 소통에도 도움이 된다.

Mock Data

이름 그대로 가짜 데이터를 의미한다. 배열 데이터에 Array.map() 함수를 적용해서 UI를 구현할 수 있다. API가 아직 준비중인 경우 무작정 백엔드의 작업을 기다리는 것이 아니라 데이터가 들어올 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 한다.

Mock Data 활용하기

data.js

데이터를 .js 파일로 분리하여 변수에 담고 컴포넌트에서 import해서 사용하는 방법이다. 보통 mockdata.js 파일은 데이터를 import 할 컴포넌트 바로 옆에 접근하기 쉬운 곳에 생성한다.

• 데이터가 담긴 변수는 모두 대문자로 한다! 컨벤션이니 꼭 지키기.
• 컴포넌트 파일 내부 함수의 실행 순서는 constructor() -> render() -> componentDidMount()
• 컴포넌트에는 데이터를 불러오더라도 빈 배열의 state를 생성해두어야 한다.
• setState로 state가 변하면 render() 함수가 재실행되는 것이다. 이 때문에 state의 배열 값을 push 메소드로 추가하지 않는 것이다.
• 대신 concat() 이나 [...list,{},] 방법을 사용한다.

commentData.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

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

• data.json 위치 - public 폴더 > data 폴더 > data.json
• json 안의 데이터는 http://localhost:3000/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
    },
    {
      "id": 2,
      "userName": "joonsikyang",
      "content": "Hi there.",
      "isLiked": false
    },
    {
      "id": 3,
      "userName": "jayPark",
      "content": "Hey.",
      "isLiked": false
    }
  ]
}

Comment.js

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;