Westagram - Data 활용

상수 데이터..?

상수 데이터란 변하지 않는 정적인 데이터로,
페이지를 구성할 때 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 데이터들을 말한다.

보통 페이지 상단의 메뉴 드롭다운이나 footer의 내용들은 변하지 않는 정적인 데이터이다.
이 부분을 하드코딩으로 일일이 만들어두면 코드가 길어 가독성이 좋지않고 수정시 해당 부분을 찾기 힘들어 유지보수에 좋지 않다.
따라서 상수 데이터로 만들어 map함수와 함께 활용하면 훨씬 효율적인 코딩이 가능하다.

상수 데이터 활용

상수 데이터의 형태는 배열로 만들며 보통 상수임을 나타내기 위해 UPPER_SNAKE_CASE로 명명한다.
상수 데이터는 어느 곳에서나 선언하여 활용할 수 있는데,

• 컴포넌트의 state나 props 등 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성
• 컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성
• 해당 컴포넌트 뿐 아니라 다른 컴포넌트에서도 공통적으로 사용되는 경우, 혹은 상수 데이터의 길이가 너무 길어 가독성을 해치는 경우는 별도의 js파일로 분리해서 사용할 수 있다.

Mock Data..?

백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때, 의도한 대로 UI가 구현되는지 확인해야하는데, 이때 사용되는 데이터가 Mock Data이다.
Mock Data는 실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에 .json확장자 파일로 JSON형태의 데이터를 생성해야한다.
또한 npm start시 로컬 서버에 올라가는 폴더인 public 폴더 하위에서 관리해야 한다.

Mock Data 사용

Mock Data는 실제 데이터와 동일하게 fetch 메서드에서 호출한다.
GET요청의 경우 생략 가능하다.

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