위코드 파운데이션 과정을 들으며 정리한 내용입니다.

Mock Data 사용하는 이유

프론트엔드와 백엔드는 프로젝트 초반 개발속도가 다릅니다. 백엔드가 API 를 구성하기 전에 프론트엔드가 UI 를 그려야 한다면, 실제 API 와 유사한 샘플 데이터인 Mock(모조, 거짓) Data 를 만들어서 사용해야 합니다. 이를 고려하지 않으면 이후 실제 데이터를 기반으로 해야 하는 작업들이 누락될 수 있습니다.

Mock Data 를 사용하면 백엔드 API 가 미완성인 상태에서 작업을 진행할 수 있고, 백엔드 API 구성을 미리 맞춰볼 수 있으며, 이후 실제 통신을 더 쉽게 할 수 있습니다.

Mock Data 만드는 방법

1/ API 구조를 백엔드 개발자와 대화로 확인
key-value 가 어떤 식으로 구성되는지 확인하고 이후 실제 데이터와 비슷한 형태로 Mock Data 를 만들어야 함(대부분 배열과 객체 형태)
2/ 확인한 key-value 데이터 형태로 json 파일 생성
로컬서버에서 통신 응답을 해야 하므로 public 폴더 안에 data 폴더 만들어서 파일 생성
3/ fetch 메서드로 Mock Data 를 호출
해당 데이터를 받을 js 파일로 가서 아래 명렁어 실행

fetch("/data/파일명.json") // 파일 경로, 패치 호출
	.then(respose=>response.json()) 
// 콜백을 인자로 전달, 매개변수로 json 형태 들어옴. 그럼 body 의 .json() 메소드가 JSON 형태를 자바스크립트 형태로 변환해줌
	.then(result=>setState(result)); 
// 콜백 인자로 전달, 매개변수로 첫번째 then 에서 반환된 객체를 result 로 받아 setState 함수로 result 를 state 에 저장

4/ fetch 메서드 호출 타이밍
컴포넌트가 브라우저에 그려지고 호출해야하면 useEffect 안에서 fetch 메서드를 호출하면 되고, 혹은 특정 이벤트 함수가 실행될 때. 예를 들어 버튼을 클릭하거나 input 값이 바뀔 때 fetch 메소드를 호출해야 한다면, 특정시점에 따라 언제 호출할지 정해야 함

Mock Data 로 데이터 넣어보기

1/ jsonplaceholder 사이트에서 /user 로 되어 있는 샘플 데이터 확인
2/ public 폴더 안 data 폴더 안에 userInfoList.json 파일 생성
3/ 데이터 사용할 컴포넌트로 이동해서 데이터 호출해보기
데이터 패칭이 최초 렌더링때 한번만 실행되어야 한다면 useEffect 활용하고 의존성 배열을 빈 배열로 둠

import React, { useEffect } from "react";

const User = () => {
	useEffect(()=>{
		fetch();
	}, []);
};

이제 경로를 적어주고 콘솔로 나오는 값을 확인합니다.

const User = () => {
	useEffect(()=>{
		fetch("/data/userInfoList.json")
		.then((respone) => respons.json())
		.then((result) => console.log(result));
	}, []);
};

값이 확인되면 useState 를 임포트 하고 state 에 값을 저장합니다.

import React, { useEffect, useState } from "react";

const User = () => {
	const [userInfoList, setUserInfoList] = useState([]);
	
	useEffect(()=>{
		fetch("/data/userInfoList.json")
		.then((respone) => respons.json())
		.then((result) => setUserInfoList(result));
	}, []);
};

이제 JSX 에서 map 메서드 활용해서 작성하는데 아래처럼 데이터가 들어오는지 미리 콘솔을 찍어봅니다.

return (
	<div>
		{userInfoList.map((userInfo)=>{
			console.log(userInfo);
		})}
	</div>
);

아래처럼 작성하면, 해당 배열안의 객체를 돌면서 해당 key 에 해당 하는 value 값을 태그 안에 넣어주게 됩니다.

return (
	<div>
		{userInfoList.map((userInfo)=>{
			return (
				<ul>
					<li>{ userInfo.name }</li>
					<li>{ userInfo.email }</li>
					<li>{ userInfo.phone }</li>
				</ul>
			);
		})}
	</div>
);