Mock data

데이터에는 정적인 데이터와 동적인 데이터가 있다.

동적인데이터: 백앤드로부터 받아야 하며, 지속적으로 변경되는 데이터를 뜻한다 (댓글 등)

정적인데이터: 상수데이터라고도 하며, 변하지 않는 데이터를 뜻한다 (footer 등)




mock data란?

• 샘플 데이터, 실제로 api에서 받아오는 데이터가 아닌 프론트엔드 개발자가 개발 진행중 필요에 의해 샘플로 만들어 본 데이터를 뜻 한다. (백엔드에서 데이터를 당장 가져올 수 없는 경우에 미리 만들어서 기능을 테스트 해 볼수 있다)

  → mock data 사용이유 :

• 모든 코드를 적으면 코드 가독성이 좋지 않고 수정이 힘들어진다.

• 상수데이터 + Array.map() 조합으로 간결하게 코드 표현이 가능하다.
  유지 보수가 용이해집니다.

→mock data 데이터 관리:

• 상수데이터는 js파일로 분리하거나, 파일내의 하단부에 선언하여 사용할 수 있다.
• 변하지 않는 데이터라는 것을 표시하기 위해서 “대문자+snake case”를 이용하여
  변수의 이름을 짓는다
• 별도로 분리시 export/import를 통해서 사용하고, js파일은 import하는 컴포넌트에서 접근하기 쉬운 가까운곳에 생성한다.

→상수데이터 사용방법

• animalData.js

const ANIMAL_LIST = [
  {
    id: 1,
    userName: '기린',
    content: '아프리카에 사는 목이 긴 동물',
  },
  {
    id: 2,
    userName: '팽귄',
    content: '남극에 사는 귀여운 동물',
  },
  {
    id: 3,
    userName: '두더지',
    content: '눈이 잘 안보이는 동물',
  }
];

export default ANIMAL_LIST;

• AnimalList.js

import React from 'react';
import Comment from './Comment/Comment';
import ANIMAL_LIST from './commentData';
import './CommentList.scss';

function AnimalList() {
  return (
    <div className="animalList">
      <h1>댓글</h1>
      <ul>
        {ANIMAL_LIST.map(animal => {
          return (
            <Comment
              key={animal.id}
              name={animal.userName}
              comment={animal.content}
            />
          );
        })}
      </ul>
    </div>
  );
}

export default AnimalList;

• mock data 생성
  • animalData.json

    [
   {
    id: 1,
    userName: '기린',
    content: '아프리카에 사는 목이 긴 동물',
  },
  {
    id: 2,
    userName: '팽귄',
    content: '남극에 사는 귀여운 동물',
  },
  {
    id: 3,
    userName: '두더지',
    content: '눈이 잘 안보이는 동물',
  }
]

mock data 위치: public > data > commentData.json

• mock data호출

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

function AnimalList() {
  const [animalList, setAnimalList] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/animalData.json', {
      method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
    })              
      .then(res => res.json()) // 백엔드에서 받아온 파일을 js가 읽을 수 있는json 파일로 바꿔준다
      .then(data => {          //받아온 파일을 어떻게 사용할지 적어준다
        setAnimalList(data);
      });
  },[])

  return (
    <div className="animalList">
      <h1>Main Page</h1>
      <ul>
      animalList[0].map(animal => {
          return (
            <Animal
              key={animal.id}
              name={animal.userName}
              comment={animal.content}
            />
      )}
      </ul>
    </div>
  );
}

export default AnimalList;

• 조건부렌더링

처음 useState의 값이 빈 배열이고, 빈배열은 truthy한 값이기 때문에 map함수가 실행이된다.
undefined인 값을 map함수로 돌리게 되면 오류를 일으키기때문에 조건을 걸어주어야 한다

if(animalList && animalList.map() //animalList 가 true이면 map()을 실행해라