상수 데이터

• 반복적인 UI를 하드코딩하지 않기 위해 데이터를 만들어놓고 Array.map() 메서드를 이용하여 UI를 표현

import React from 'react';
import { Link, useNavigate } from './react-router-dom';

// 상수 데이터는 UPPER_SNAKE_CASE 네이밍 컨벤션으로 명명합니다. 또한 Array.map() 메서드를 활용해야 하기 때문에 데이터 구조를 배열 안의 객체로 만듭니다.
// 상수 데이터는 컴포넌트 파일 내부에 선언하는 경우, 컴포넌트 밖에 선언하는 경우로 나뉩니다. 대개 공통으로 많이 사용되는 상수 데이터는 별도 파일로 분리하야 관리합니다.
const GNB_LIST = [
	{
		id: 1,
		text: "홈",
		path: "/url_1"
	},
	{
		id: 2,
		text: "카테고리",
		path: "/url_2"
	},
	{
		id: 3,
		text: "마이페이지",
		path: "/url_3"
	},
	...
]

const Gnb - () => {
	return (
		<>
			<ul>
				{GNB_LIST.map(menu => (
					<li key={menu.id}>
						<Link to={menu.path}>
							{menu.text}
						</Link>
					</li>
				))}
			</ul>
		</>
	)
}

export default Gnb;

Mock Data

• 백엔드 API가 완전하지 않아도 프론트엔드 개발은 가능
• 그것을 가능케 하는 것인 Mock Data, 즉 모조 데이터
• 이 데이터는 실제 서버에서 주는 데이터의 형식과 동일해야 하기 때문에 JSON(JavaScript Object Notation) 형식으로 생성할 필요가 있음
• 이 데이터는 로컬 서버에서 받아와야 하므로, public 폴더 내에서 관리해야 함

// movieMockData.json
// key 값을 "" 안에 담아야 한다는 것만 주의하면 크게 어려울 것이 없는 데이터 구조입니다.
[
	{
		"id": 1,
		"name": "대부",
		"genre": "스릴러",
		"price": 15000,
	}, 
	{
		"id": 2,
		"name": "존 윅",
		"genre": "액션",
		"price": 10000,
	}, 
	...
]

Fetch() 메서드 (Feat. Mock Data)

• fetch() 메서드는 통신에 사용하는 메서드이며, 클라이언트가 서버에 요청하고 응답받을 수 있게 되어 있음

// Mock Data를 받아오는 시점은 기획에 따라 다를 수 있습니다. 이 예시에서는 페이지를 불러올 때에 바로 화면에 그리는 경우를 상정했습니다.

useEffect(()=>{
	// fetch() 메서드는 첫 번째로 인자로 http 요청을 보낼 API 주소를 받습니다.
	fetch('./data/movieMockData.json'.{
		// 두 번째로 인자로 옵션 객체를 전달합니다. method에는 서버로부터 데이터를 받아오는 GET과 서버로 데이터를 넘기는 POST 등이 있습니다.
		method: 'GET'
	})
		// 첫 번째 then에는 서버로부터 온 응답 데이터(response data)를 JavaScript 객체 형태로 바꿔주는 작업을 실행해야 합니다. 그것이 바로 json() 메서드입니다. 
		.then(res => res.json())
	
		// 두 번째 then에서는 받아온 데이터를 화면에 그려주기 위해서 Setter 함수를 업데이트합니다.
		.then(data => {
			setMovieList(data);
		})
}, [])

Fetch() 메서드

fetch("API 주소", { 
	method: "POST", 
	headers: { 
		"Content-Type": "application/json;charset=utf-8",
	}, 
	// JSON.stringify()는 서버에 데이터를 보낼 때 데이터 형태를 JSON 형태로 변환해주는 메서드입니다.
	body: JSON.stringify({ 
		title: "test 1", 
		content: "test 2", 
	}), 
})
	.then((res) => {
		// 응답 결과가 정상이라면 그때에 json 메서드로 응답 데이터를 JavaScript 객체 형태로 바꿔줍니다.
		if (res.ok === true) {
			return res.json();
		}
	})
	.then((data) => {
		// 응답 결과에 따라 다양한 분기로 UI 표현이 가능합니다.
		if (data === "LOGIN SUCCESS") {
			...
		} else if (data === "LOGIN FAILED") {
			...
		} else {
			...
		}
	});