[React] Mock Data 활용

✅ Mock Data ?

• mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.
• 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말한다.

✅ Mock Data가 필요한 이유

• API 가 아직 준비중인 경우
  :: 프로젝트 진행 시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 한다.

• 주고 받는 데이터가 어떤 형태인지, key-value 값을 미리 맞춰봄으로써 Backend와의 소통을 효율적으로 진행할 수 있다.

✅ Mock Data를 관리하는 두 가지 방법

관리 방법에는 1) .js파일로 데이터를 분리하여 컴포넌트를 import하는 방법과 2)실제 API에서 담아주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용하는 방법이 있다.

이 중 첫번째 방법은 이전에 배운 component import 방법과 크게 다르지 않아 연습도 할 겸 두번째 방법을 적용해 보았다.

⏩ .json (fetch 함수) 활용 예시

• .json 파일 위치 - public 폴더 > data 폴더 > data.json
• data.json

  {
   "data": [
     {
       "idx": 20201012,
       "userId": "min_notming",
       "comment": "더 올려주세요ㅠ"
     },
     {
       "idx": 20201013,
       "userId": "Yanggang",
       "comment": "Hi Monaca"
     },
     {
       "idx": 20201014,
       "userId": "loco_conmoto",
       "comment": "Cuteness overload"
     }
   ]
  }

• 위 데이터는 http://localhost:3000/data/data.json 주소에서도 확인 가능하다.

• 위 주소를 API주소로 생각하고 fetch함수와 GET 메소드를 사용해 실제 API에서 데이터를 받아오는 것처럼 인스타그램 클론코딩에 적용해보았다.

  class Main extends React.Component {
   constructor() {
     super();
     this.state = {
       content: "",
       commentList: [],
     };
   }
  componentDidMount() {
     fetch("http://localhost:3000/data/data.json", {
       method: "GET"
     })
       .then(res => res.json())
       .then(res => {
         this.setState({
           commentList: res.data
         });
       });
   }
  

• fetch 함수에 대해서는 여기에 조금 더 자세히 정리해두었다.

• Mock Data 활용 전에는 this.state의 commentList에 직접 하드코딩으로 데이터를 입력해주었었었다.

• 두번째 .then에 this.setState를 사용하여 비어있던 commentList 배열에 Mock Data를 추가해 주었다.

• 이 처럼fetch함수를 사용하면 Mock Data를 따로 분리할 수 있어 코드를 조금 더 간결히 유지할 수 있다.