처음 화면을 렌더링했을때, API 호출을 받아 일기를 렌더링 할 수 있는 기능을 useEffect
를 활용한 방법을 기록하고자 합니다.
API 호출을 받기 위한 URI는 JsonPlaceholder 사이트에서 dummy data를 받아옵니다.
/comments URI를 response로 받아서 해당 프로젝트에 call을 받아오고자 합니다.
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo@gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
}
email
을 author로 받고, body
를 context로 받아 일기 리스트 response로 assign합니다.
fetch()
const getData = async() => {
const res = await fetch('https://jsonplaceholder.typicode.com/comments'
).then((res)=>res.json());
const initData = res.slice(0,20).map((it)=>{
return {
author: it.email,
content: it.body,
emotion: Math.floor(Math.random()*5)+1,
created_date: new Date().getTime(),
id: dataId.current++
}
});
setData(initData);
}
API URI를 fetch()
로 받아오고, 그리고 json형태로 값을 받아옵니다.
이때 반환값을 console로 찍어보면 다음과 같이 배열형 객체를 리턴하게 됩니다.
따라서 이 배열안에 있는 객체값을 실제 컴포넌트에 할당합니다. 그리고 setData
로 response로 받은 값을 state
에 할당합니다.
useEffect
로 초기 렌더링 시, 값을 불러오기리액트의 3가지 LifeCycle 중, 초기에 화면을 렌더링 시 값을 setting 할 수 있는 상태를 mount라고 합니다.
따라서 이 프로젝트가 mount 되자마자 API로부터 받은 response를 DiaryList
컴포넌트에 렌더링 될 수 있게 작업해야합니다.
useEffect(()=>{
getData();
},[])
이와 같이 useEffect()
를 통해 mount때 API함수 call하는 함수를 호출합니다. (mount 상태때 작업이므로, Dependency Array는 빈 배열로 들어갑니다.)
리액트 훅 중 하나인 useEffect
를 통해 API Call을 통해 response를 받아 일기 리스트로 불러오는 작업을 구현할 수 있었습니다.