Mock Data?
mock의 사전적 의미는 거짓된, 가짜의 이며, 개발환경에서는 가짜 데이터, 샘플데이터로 해석된다.
프론트엔드는 백엔드에서 받아온 API를 웹에 노출시켜야 하는데 프로젝트를 진행할 때
미리 받을 데이터 양식을 정하고 Mock data에 그 양식을 토대로 샘플 데이터를 작성하면
백엔드에서 API가 나올 때까지 무작정 기다릴 필요 없이, mock data를 만들어 데이터가 들어오는
상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인이 가능하다.
Mock data 사용법
Mock data의 관리방법
.js
js 파일로 데이터 분리하고
js파일안에 데이터를 변수에 담아 필요한 컴포넌트에서 import해서 사용한다.
.json
실제 API에서 보내주는 데이터형식에 맞게 json파일에 데이터를 담아 fetch함수를 통해 데이터를 받아오는 방법
예를들어 데이터이름이 commentData.json 이라면 위치를 다음과 같이 배치한다.
public 폴더 > data 폴더 > commentData.json
백엔드에서 보내주는 실제 API형식으로 샘플데이터를 작성한다.
[
{
"id": 1,
"userName": "wecode",
"content": "Welcome to world best coding bootcamp!",
"isLiked": true
},
{
"id": 2,
"userName": "joonsikyang",
"content": "Hi there.",
"isLiked": false
},
{
"id": 3,
"userName": "jayPark",
"content": "Hey.",
"isLiked": false
}
]이제 내 리액트 컴포넌트에 연동하려면 우선 fetch함수를 사용하여야 한다.
fetch() 함수로 API 호출하기
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));fetch 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.
반환된 객체는, API 호출이 성공했을 경우에는 응답(responsse)객체를 resolve하고,
실패 했을 경우에는 예외(error)객체를 reject한다.
옵션 객체에는 HTTP방식(method), HTTP 요청헤더(header), HTTP 요청 전문(body) 등을
설정해 줄 수 있다.
응답 객체로 부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다.
위의 정의한 내용들을 정확히 이해하기가 어려워 우선 예제와 실습을 통해 먼저 익혀보려고 하였다.
HTTP 통신 방식(method)
GET 호출 방식
GET방식은 fetch함수의 Default 값이므로 옵션인자를 쓸 필요가 없다.
단순히 원격 API에 있는 데이터를 가져올 때 쓰이는 방식이다.
이번 주제는 Mock data 를 받아오는 것이기 때문에 GET 호출 방식을 사용하였다.
실습
우선 내가 구현하려고하는 westagram의 메인페이지에 피드는 받는 데이터에 따라 구현되도록 코드를 작성하였다.
메인페이지가 켜질때 바로 데이터를 받아야 하기 때문에 componentDidMount()함수에
fetch 함수를 작성하였다.
componentDidMount() {
fetch('http://localhost:3000/data/ContentsData.json')
.then(res => res.json())
.then(data => {
this.setState({
contentsData: data,
});
});
}
첫번째 인자로는 받아올 mock data의 api주소를 입력한다.
GET 방식을 사용하기 때문에 method 항목을 생략할 수 있었다.
.then(res => res.json())
위의 promise함수를 사용하여 응답객체(response)로 부터 json포멧의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있다.
그리고 두번째 then에서는 받는 객체를 data라는 매개변수로 지정
setState안의 state에 data로 지정하면 contentsData 라는 state에 접근하기만 하면
mock data를 자유롭게 사용할 수 있다.
map 함수를 사용하기
컴포넌트에 바로 데이터를 연결시켜 출력하면 들어오는 데이터는 3개의 피드인데 화면에는 피드가 1개만 구현된다.
map함수를 사용하여 데이터의 갯수만큼 map을 돌려 각각의 피드에 데이터를 넣어주면 된다.
{contentsData.length > 0 &&
contentsData.map(data => <Contents contentsData={data} />)}
contentsData.length > 0 &&이 조건문은 사용한이유는?
리액트의 비동기적 특성 때문에 처음에는 state에 있는 값이 없는 채로 render 되고 그 후 componentDidMount를 함수를 실행한다. 그럼 웹이 실행되고 처음 빈값을 map함수를 적용시키게 되버리니 바로 map에러가 발생한다. 그걸 막기위해 다음 조건문을 주어 componentDidMount를 함수를 실행한 후 map을 실행하도록 하였다.
부모컴포넌트에 map을 실행하엿는데 자식에게는 어떻게 해당요소를 전달할까?
map은 임의의 매개변수를 하나 지정한후 그 매개변수를 사용하여 요소에 접근하는데,
이를 활용하여 <Contents contentsData={data} /> map의 매개변수인 data를
contentsData이라는 이름으로 자식 컴포넌트에 전달하면 된다.
mock data를 사용하면서 실제 백엔드와 서버를 연결하고 받을 때 어떤 형식으로 진행되는지 어느정도 예상을 할 수 있었다. 단 실제로는 지금 실습의 데이터처럼 간단하고 단순한 구조로 넘어오지 않기 때문에 받는 mock data 객체를 좀더 복잡한 형식으로 받아 map함수 등 여러가지 방법을 통해 접근하는 방법을 찾아 봐야할것 같다.
