[React] 상수데이터 / Mock 데이터

-·2022년 12월 4일

상수데이터란?

변하지 않는 데이터
UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해 가져올 필요가 없는 정적 데이터이다.
반복되는 UI 구조는 상수데이터와 map 메서드를 활용해 간결하게 표현이 가능하다.

상수데이터를 왜 사용하는가?

반복되는 UI를 하드코딩으로 일일이 만들어야한다고 생각해보자, 코드가 길어져 가독성도 떨어지고 수정이 필요할 때 해당 부분을 찾기 힘들어 추후 유지 보수가 힘들어진다.
배열 안에 객체를 추가 혹은 삭제만으로 UI 수정에 유용하다.

💡상수 데이터 활용 방법 (+ 아래 코드와 함께 참고)

별도의 파일을 생성하고, 그 안에 상수 데이터를 선언한다.(상수데이터는 컴포넌트 파일 내부에 선언해줄 수도 있지만 가독성이 떨어지거나 다른 파일에서 동일한 데이터가 필요한 경우 파일로 분리하여 관리)
상수데이터 변수는 대문자 + snake case를 이용해서 변수의 이름을 짓는 컨벤션이 있다.
별도의 파일로 분리할 경우 export/ import를 통해 필요한 파일에서 사용한다.
Array.map() 메소드를 이용해서 컴포넌트를 렌더링한다.
해당 상수데이터의 배열 안에 들어가 있는 요소의 갯수만큼 컴포넌트가 만들어진다.

//Data.js

import React from "react";
import { MENU_LIST } from "./uiData";

// 상수데이터의 선언은 컴포넌트 밖에서 선언한다. (위치 A or 위치 B)
// 이 예제에서는 uiData.js 파일을 따로 만들어 데이터를 관리하였다.

// 위치 A 
const Data = () => {
  return (
    <div>
      <ul>
        {MENU_LIST.map((menuList) => {
          return <li key={menuList.id}>{menuList.menuName}</li>;
        })}
        {/* 하드코딩을 했다면 아래 처럼 일일이 나열했을 것이다.
        <li></li>
        <li>김밥</li>
        <li>라면</li>
        <li>돈까스</li>
        <li>사이드메뉴</li> 
        <li>세트메뉴</li> */}
      </ul>
    </div>
  );
};

export default Data;

// 위치 B

// uiData.js

const MENU_LIST = [
  { id: 1, menuName: "김밥" },
  { id: 2, menuName: "라면" },
  { id: 3, menuName: "돈까스" },
  { id: 4, menuName: "사이드메뉴" },
  { id: 5, menuName: "세트메뉴" }
];

export default MENU_LIST;

Mock Data

Mock : 흉내내다.
가짜 데이터, 샘플 데이터, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터이다.

왜 Mock Data를 쓰는가?

백엔드 API가 미완성인 상태에서도 차질없는 개발이 가능하다. 실제 API가 없어도 API 데이터처럼 UI 렌더링이 가능하다. mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI 기획에 맞게 구현되는지 먼저 확인해볼 수 있다.
백엔드와의 효율적인 소통이 가능하다. 주고 받는 데이터가 어떤 형태인지, key & value 값을 미리 맞춰볼 수 있다.

왜 확장자가 .js가 아니고 .json인가?

실제로 받아올 데이터는 서버와 통신으로 json형태로 응답받는다. 그래서 실제 API 데이터를 흉내내서 만든 Mock data도 .json파일로 만든다.
생성된 Mock Data의 위치는 public 폴더 > data 폴더 에서 관리한다. (로컬서버에서 통신으로 응답받아 구현하기때문에 public폴더에서 관리)

fetch 함수란?

fetch함수를 사용하여 데이터를 비동기로 요청할 수 있다.
(비동기를 쉽게 예를 들어 설명하자면, 커피 주문하고 나올때까지 대기하는 것이 아니라,
진동벨 받아놓고 다른 일처리를 하다가 진동벨 울리면 커피 받으러가면 된다는 것과 비슷하다. 비동기적으로 코드를 실행하면 더 유동적으로 더 많은 일을 할 수 있다!)

fetch 메서드의 첫번째 인자: API 주소를 전달하는데 이 주소에 Mock data 파일의 경로를 적거나 실제 백엔드로부터 받은 API주소를 적는다.
첫번째 then: 요청이 성공할 경우 response객체를 받아 json형태로 파싱한다.
두번째 then: json형태의 응답 body의 데이터를 출력한다.

fetch('/data/파일명.json')
	.then(response=>response.json())
	.then(result => setState(result))

두번째 then 메서드 인자로 callback을 전달하고 매개변수에는 첫번째 then에서 반환된 객체를 result로 받아 setState함수로 result를 state에 저장한다. 그 다음 호출은 언제해야할까?

fetch로 통신을 하기 전에 데이터를 불러올 타이밍을 생각해봐야한다.

컴포넌트가 브라우저에 그려지고 호출해야하는 상황 : useEffect안에서 fetch메서드 호출
특정 이벤트 함수가 실행될때 호출해야하는 상황 : 특정이벤트 함수 내에서 fetch메서드 호출

💡mock data 활용 방법 ( + 아래 코드와 함께 참고 )
1. 백엔드 API가 완성되지 않은 상태였을 때, 백엔드 개발자와 소통하여 필요한 데이터의 구조와 key value가 어떤 형태인지 확인한다.
2. 그걸 가지고 프론트엔드에서 자체적으로 mock data를 만들고, 실제 API처럼 통신으로 요청해서 받아오기 떄문에 fetch 메서드를 사용한다.
3. 브라우저에 마운트되자마자 화면에 그려야하기 때문에 useEffect 안에서 fetch메서드를 호출한다.
4. state에 데이터를 저장하여 필요한 데이터를 가져다가 UI로 그린다.

아래 주소에서 데이터를 가져와서 활용한 코드이다.
https://jsonplaceholder.typicode.com/users

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

const User = () => {
  const [userInfoList, setUserInfoList] = useState([]);
  console.log(userInfoList);

  useEffect(() => {
    fetch("/data/userInfoList.json")
      .then((response) => response.json())
      .then((result) => {
        setUserInfoList(result);
      });
  }, []);

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

    </div>
  );
};

export default User;