React | 상수 데이터 / mock data

상수 데이터
mock data

---

상수 데이터

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다.

상수데이터는 반복되는 UI를 상수 데이터 + Array.map( ) 함수의 조합을 이용해서 간결하게 표현할 수 있어 유지보수가 용이합니다.

 

상수 데이터의 활용 - 댓글 예제

• 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있습니다.
• 상수 데이터 변수는 대문자 + snake case 를 이용해서 변수의 이름을 짓는 컨벤션이 있습니다.
• 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용합니다.
• JS파일은 데이터를 import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성합니다.

//commentData.js
const COMMENT_LIST = [
  {
    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_LIST;

 

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

class CommentList extends Component {
	render() {
	    return (
	     <div className="CommentList">
         	<h1>댓글</h1>
	   <ul>
	          {COMMENT_LIST.map(comment => {
	            return (
	              <Comment
                  	key={comment.id}
	                name={comment.userName}
	                comment={comment.content}
	              />
	            );
	          })}
	        </ul>
	      </div>
	    );
	  }
}

export default CommentList;

• commentData.js 라는 별도의 파일을 만들고, 그 안에 COMMENT_LIST라는 상수 데이터를 선언해 줍니다. 
• 그리고 CommentList.js 에서 COMMENT_LIST를 import 한 후, Array.map() 메소드를 이용해서 Comment를 렌더링 하고 있습니다.
• 또한 댓글 내용이 변경되어야할 경우 COMMENT_LIST안의 내용을 수정하면 되고, 댓글을 4개, 5개로 만들고싶은 경우에는 COMMENT_LIST배열안에 하나의 요소를 더 추가해주기만 하면 됩니다.
• 해당 파일에서만 사용하는 간단한 상수 데이터의 경우에는 파일 내부에 선언해서 사용하기도 합니다.
  단, 이때 해당 파일에서 제일 중요한 내용은 컴포넌트이기때문에 중요도의 순서에 따라서 컴포넌트 다음에 상수 데이터를 선언해줍니다.

mock data

mock data란 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말합니다.

 

예제

//commentData.json
[
  {
    "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
  }
]

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

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

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

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

    return (
      <div className="comment">
        <h1>Main Page</h1>
        <ul>
          {commentList.map(comment => {
            return (
              <Comment
              key={comment.id}
              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}
            />
            <button 
            className="addCommentBtn" 
            type="submit" 
            onClick={this.addComment}>
	            Click
	          </button>
	        </form>
        </div>
      </div>
    );
  }
}

export default Comment;