리액트 : 상수 데이터 / Mock 데이터

상수 데이터 :

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터이다.

// Footer.js

import React from 'react';

const Footer = () => {
  return (
    <footer>
			{/* 생략 */}
      <ul>
				{FOOTER_INFO_LIST.map(info => (
          <FooterInfo key={info.id} link={info.link} text={info.text} />
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

const FOOTER_INFO_LIST = [
  { id: 1, link: "https://github.com/terms", text: "Terms" },
  { id: 2, link: "https://github.com/privacy", text: "Privacy" },

	...

  { id: 11, link: "https://github.com/about", text: "About" },
];

Mock 데이터 :

실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다.

Mock 데이터를 사용하는 이유 :

• 백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발할 수 있다.
• 백엔드 API의 구성을 미리 맞춰볼 수 있다.
• 실제로 API 통신을 진행할 때 원활하게 할 수 있다.
  
  

Mock 데이터 생성 팁 :

• .json 확장자 파일로 생성
• puublic 폴더 하위에서 data폴더 생성 후 관리
  
  

Mock 데이터 사용 :

useEffect(() => {
  fetch('/data/recommendData.json', {
    method: 'GET'
  })
    .then(res => res.json())
    .then(data => {
      setProductList(data);
    });
},[]);