Mock Data

Mock Data?

발전된 웹페이지(페이스북, 인스타그램, 네이버)등을 보면, 사용자가 댓글을 달고 글을 포스팅하면, 각 사이트의 DB에 저장되며, 사용자가 직접 혹은 웹페이지에서 삭제하지 않는 한, 계속 남아있다. 하지만, 우리의 위스타그램은 Front 기반으로만 만들어져 데이터를 UI적으로 구성할 수 있지만, DB가 존재하지 않아 새로고침으로 데이터가 날아간다. 이를 해결하기 위해 Mock Data를 사용한다. 따로 json확장자를 가진 파일을 생성하여, 필요한 데이터를 객체 형태로 저장해놓는다.

useEffect?

데이터를 불러오기 위해, 함수에 영향을 주지 않는 기능을 사용해야한다. 그런 side effect를 일으키기 위한 적절한 장소로 useEffect hook을 react에서 사용한다. useEffect의 side effect는 함수내에서 render가 된후에 실행이 됩니다. 이런 방식으로 useEffect는 rendering에 영향을 주지 않습니다.
기본적인 useEffect의 형식은 다음과 같습니다.

useEffect(실행시킬 동작, [타이밍])

위에서 [타이밍] 이란 의존성 배열이라고 하며, 타이밍에 들어간 값의 변화를 감지하여, 변할때마다 useEffect가 실행된다. 만약 의존성 배열 자리에 아무것도 넣지 않는다면, Side Effect는 렌더링될때마다 실행된다. 그리고 빈 배열로 남겨놓는 경우에는 최초의 렌더링때 한번 실행되고 이후에는 실행되지 않는다.

import { useEffect } from 'react';

function hello(name) {
  useEffect(() => {
  console.log(name + "님 안녕하세요!"); // 실행순서 2번(Side Effect)
  }, []);
  
  console.log(name + "님 안녕!"); // 실행순서 1번
}

hello("bangi");

위의 코드로 인해 나오는 콘솔의 순서는 다음과 같다.
1. bangi님 안녕!
2. bangi님 안녕하세요!

Mock Data 쓰는 법

useEffect 내부에 fetch함수를 사용하여 데이터를 받는다. 형태는 아래와 같다.

const [commentList, setCommentList] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. 
    })              // 예시코드에서는 이해를 돕기 위해 명시적으로 기입해뒀습니다.
      .then(res => res.json())
      .then(data => {
        setCommentList(data);
      });
  },[])

소감

단순한 mock data를 이용하여 백엔드와의 연결없이도, 데이터를 가져오는 방법을 습득했다. 오늘 배운 이 방식을 이용하여, 다음에 백엔드와 연결을 할때도 버벅대지않고, 그 과정을 이해하는게 중요하다고 생각했다. 그리고 새롭게 나온 fetch함수에 대한 이해를 하기위해서 과정을 천천히 다시 살펴볼 필요가 있다는것을 느끼게 된 하루였다.