DATA 활용

상수 데이터란?

정적인 데이터
Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있다.

Array.map() 활용

for문, Array.forEach() 메서드와 유사하지만, 요소에 콜백 함수를 실행한 결과를 모은 새 배열을 return(반환)한다는 점에서 차이가 있다.

const arr = [1, 2, 3];

//코드를 줄이기 전
const newArr = arr.map(num => {
	return num * 2;
});

//위 코드를 줄이면 
const newArr = arr.map(num => num * 2);

상수 데이터 선언 위치

1. 컴포넌트 파일 내부에서 선언
2. 별도 파일로 분리

Mock Data란?

백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때, Mock(모조, 거짓) Data를 만들어 사용한다.

• 형태 : json 확장자 파일로 JSON 형식의 데이터를 생성
• 위치 : npm start 시 로컬 서버에 올라가는 폴더인 public 폴더 하위에서 관리
• 호출 : Mock Data는 실제 데이터와 동일하게 fetch 메서드에서 호출
  우리가 생성한 Mock Data의 주소 입력, http://localhost:3000 은 생략이 가능하다.
• 호출 시점 : useEffect hook을 통해 컴포넌트가 마운트(최초로 화면에 그려짐)된 후 한 번만 데이터를 받아오도록 한다.