🚀 학습 목표
- Data 활용의 필요성을 이해하고, 상수 데이터와 Mock Data를 구분할 수 있다.
- 상황에 맞게 올바른 형식의 데이터를 활용할 수 있다.
- Array.map() 메서드를 사용해 반복되는 UI를 처리할 수 있다.
- 상수 데이터를 활용해 정적인 UI를 구성할 수 있다.
- Mock Data를 활용해 백엔드 API를 모방하여 개발을 진행할 수 있다.
상수 Data
반복적인 UI 구성하지만 백엔드 API등 가져올 필요가 없는 정적인 데이터 (Nav, footer 등)
- 상수데이터를 사용하는 이유
- 반복되는 UI를 하드코딩하면 코드가 길어져 가독성에 좋지 않고, 수정이 필요할 때 해당 부분을 찾기 힘들어 유지보수가 어렵다.
-Array.map()메서드와 조합해서 반복되는 UI를 간결하게 표현.
상수 데이터 활용
상수 데이터 선언
- 변수명은
UPPER_SNAKE_CASE네이밍 컨벤션을 따라 배열로 생성(id 필수)
const FOOTER_LIST = [
{ id: 1, text: 'Westagram 정보 ·' },
{ id: 2, text: '지원 ·' },
.
.
.
{ id: 11, text: '언어' },
];
상수 데이터 적용
- map 메서드를 활용하여 실제 코드 적용
- map메서드에서 return하는 js를 컴포넌트화 하고, props로 넘겨주는 방식으로도 활용 가능
<footer>
<p>
{FOOTER_LIST.map(info => (
<span key={info.id}>{info.text}</span>
))}
</p>
<span>© 2023 WESTAGRAM</span>
</footer>상수 데이터 선언 위치
- 컴포넌트 파일 내부의 선언
- 해당 컴포넌트 내에서만 사용되고 가독성을 해치지 않는다면 내부에 상수 데이터 선언
- 컴포넌트의 state나 props 등, 컴포넌트 리랜더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에 선언
- 컴포넌트가 리렌더링 될 때마다 새로 선언되 할당 될 필요가 없는 경우 컴포넌트 외부에 작성
[ 컴포넌트 외부 작성 예시 ]
const Footer = () => {
return (
<footer>
<p>
{FOOTER_LIST.map(info => (
<span key={info.id}>{info.text}</span>
))}
</p>
<span>© 2023 WESTAGRAM</span>
</footer>
);
};
export default Footer;
const FOOTER_LIST = [
{ id: 1, text: 'Westagram 정보 ·' },
{ id: 2, text: '지원 ·' },
.
.
.
{ id: 11, text: '언어' },
];- 별도 파일 분리
- 상수 데이터가 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 사용되는 경우
- 상수 데이터의 길이가 너무 길어서 가독성을 해치는 경우
[ .js파일로 분리 ]
- 분리된 파일, 상수데이터 앞에
export작성
export const FOOTER_LIST = [
{ id: 1, text: 'Westagram 정보 ·' },
{ id: 2, text: '지원 ·' },
.
.
.
{ id: 11, text: '언어' },
];
- 해당 파일에서 export한 상수 데이터를 사용할 컴포넌트에서 import하여 사용
import React from 'react';
import { FOOTER_LIST } from './data'; //상수데이터 import
const Footer = () => {
return (
<footer>
<p>
{FOOTER_LIST.map(info => (
<span key={info.id}>{info.text}</span>
))}
</p>
<span>© 2023 WESTAGRAM</span>
</footer>
);
};
export default Footer;mock Data
Mock Data란?
- UI구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야하는 경우 무작정 기다리는 것이 아닌 데이터가 들어오는 상황을 대비해 의도한 대로 UI가 구현되는지 확인하기 위해 사용한다.(프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터(모조 데이터) )
Mock Data를 사용하는 이유
- 백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발할 수 있음
- 백엔드 API의 구성을 미리 맞춰볼 수 있음
- 실제로 API 통신을 진행할 때 원할하게 할 수 있음
Mock Data 생성
형태
- 실제 데이터 형식과 동일하게 만들어야하기 때문에
.json형식의 데이터를 생성 - 백엔드 개발자와 소통해 key-value값을 동일 하게 맞추어 추후 원할히 통신할 수 있도록 해야함
// public/data/recommendData.json
[
{
"id": 1,
"name": "[돈마루] 한돈 삼겹살 2종 (냉장)",
"discount_rate": 5,
"discounted_price": 12967,
"original_price": 13650,
"is_sold_out": false
},
{
"id": 2,
"name": "엔다이브 2~3입",
...
},
...
]위치
- Mock Data 파일의 위치는 npm start 시 로컬 서버에 올라가는 폴더인 public 폴더 하위에서 관리
- public 폴더 하위에 data 폴더를 생성한 후 해당 폴더에서 Mock Data를 관리
public
└── data
├── recommendData.json
├── productData.json
└── ...Mock Data 사용
호출
- 실제 데이터와 동일하게 fetch 메서드에서 호출
fetch('http://localhost:3000/data/recommendData.json')-
fech 메서드의 첫번째 인자로 http 요청을 보낼 API 주소를 받는데, 여기에 우리가 생성한 Mock Data 주소를 입력
-
두 번째 인자는 요청의 옵션 값들로 필요에 따라 객체 형태로 넣을 수 있는데,
method,headers,body,mode,credentials,omit,same-origin,include,cache,redirect,referrer,referrerPolicy,integrity,keepalive,signal등의 key와 각각 해당하는 value를 넣을 수 있다. 여기서 중요한 건, 클라이언트의 입장에서 서버에게 요청하는 것 -
첫번째 then에서는 JSON 형태 response 데이터를 js객체 형태로 바꿔줌.
-
두번째 then에서는 받아온 데이터를 화면에 그려주기 위해 state에 업데이트 해줌(get이라면 업뎃 전 console.log 찍어서 잘 들어왔는지 확인)
fetch('/data/recommendData.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
setProductList(data);
});호출 시점
-
버튼을 클릭했을때 받아와야하는 경우
- fetch 메서드를 담은 함수 생성
- 버튼에 onClick 속성을 활용하여 함수 호출 -
페이지를 불러올때 바로 화면에 그려줘야하는 경우.
- useEffect를 통해 컴포넌트가 마운트(최초로 화면에 그려짐)된 후 한번만 데이터를 받아오도록 함(의존성배열 빈배열로)
useEffect(() => {
fetch('/data/recommendData.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
setProductList(data);
});
},[]);
개발짜🏃♀️