[TIL][React] mock data 활용법

mock data 란?

데이터 api가 나오기 전에 페이지 레이아웃이 먼저 만들어진 경우 mock data(가짜인 샘플 데이터)를 가지고 UI가 기획에 맞게 데이터를 가져와서 렌터되는지 확인 할 수 있다. 백엔드와 미리 협업하여 가져오게 될 key-value 값 형태를 알아보는 것이 좋다

componentDidMount()

mock data 사용시 사용하는 componentDidMount() 메소드는 컴포넌트가 마운트(돔 트리에 넣어질때) 된 후 즉시 실행되는 메소드이다. 데이터 로드가 필요한 경우 네트워트 요청을 인스턴스화 하기 좋다.

mock data 관리하는 방법

1. data.js

   필요한 배열데이터를 js 파일에 담아 변수화 한 후 데이터를 사용할 컴포넌트 내에서 import 하여 사용한다. 파일 위치는 사용하게 될 컴포넌트 바로 옆에 접근하기 쉽도록 생성한다.

   const STORYFEEDINFO = [
     {
       userId: "kendalljenner",
       imgUrl:
         "https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-19/s150x150/110054169_631618667480471_8395309931424378448_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_ohc=APx1rWNWYaEAX98bol-&tp=1&oh=3b2ebfd3eeb40ba096e24fc8460adfd8&oe=600B7BE1",
     },
     {
       userId: "justinbieber",
       imgUrl:
         "https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-19/s150x150/118803455_120863839516646_4281183625374452390_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_ohc=vv_HPTQckqUAX_f8opF&tp=1&oh=c1035e34f64ace8190c0a90e23770678&oe=60090684",
     },
     {
       userId: "katyperry",
       imgUrl:
         "https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-19/s150x150/118550039_182034303327791_6144105614706839563_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_ohc=og4Syra4QF8AX9A8CYh&tp=1&oh=4f0374067a6480d8b670ba1426fe9510&oe=600AF2F4",
     },
     {
       userId: "kyliejenner",
       imgUrl:
         "https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-19/s150x150/123885563_855075811697113_8647373123046258603_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_ohc=q-beqDUMLUAAX9MQ5Lp&tp=1&oh=12a89c666ae0088df7c8984d0b529b7d&oe=600ACF52",
     },
     {
       userId: "kimkardashi...",
       imgUrl:
         "https://scontent-ssn1-1.cdninstagram.com/v/t51.2885-19/s150x150/109136688_610125179899980_1868015297406610141_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_ohc=z_ukZiTl20IAX-Y6DRI&tp=1&oh=85e566ac5a9f138758214123fd849dea&oe=600BFC22",
     },
   ];
   
   export default STORYFEEDINFO;

   //데이터파일을 import 해준다
   import STORYFEEDINFO from "./StoryFeedData";
   
   //데이터를 사용하게 될 컴포넌트의 초기 상태값에 데이터형태를 설정해준다
   constructor() {
       super();
       this.state = {
         storyFeeds: [],
       };
     }
   
   //componentDidMount() 메소드를 실행하여 불어온 데이터 상태 값을 변경해준다
   componentDidMount() {
       this.setState({
         storyFeeds: STORYFEEDINFO,
       });
     }

2. data.json

   실제 API에서 보내주는 데이터 형식에 맞게 json파일에 데이터를 담아 fetch 함수를 사용하여 받아온다. data의 위치는 public폴더 → data폴더 → data.json 에 위치하도록한다. (http://localhost:3000/data/data.json 에 접근하면 json 데이터 확인가능)

//json 파일의 형태는 객체에 담기고 모든 키값은 " "으로 묶어줘야한다.
{
  "data": [
    {
      "id": 1,
      "userId": "nameauction",
      "cmt": "Happly New Year✨🎄🌝",
      "liked": false
    },
    {
      "id": 2,
      "userId": "pppp",
      "cmt": "Goddess 😍",
      "liked": false
    }
  ]
}

//데이터를 불어올 컴포넌트 초기 상태값에 데이터의 형식을 설정해준다.
constructor() {
    super();
    this.state = {
      commentInfo: [],
    };
  }

//데이터를 불러오기 위해 componentDidMount() 메소드를 실행해준다
componentDidMount() {
//fetch함수를 이용하여 데이터url에 get요청을 보낸다
    fetch("http://localhost:3000/data/data.json", { method: "GET" })
      .then((res) => res.json())
//보낸 요청에 대한 응답이 오면 데이터를 받아 상태값을 업데이트해준다
      .then((res) => {
        this.setState({
          commentInfo: res.data,
        });
      });
  }