[Project-심플다이어리] API호출

• useEffect(Lifecycle)를 사용하여 컴포넌트 Mount시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용
  => 컴포넌트 Mount시 일기 데이터를 로딩
• JSON placeholder를 사용하여 fetch로 API 가져오기

알게된 것

• useEffect 사용 방법

const dataId = useRef(0);

const getData = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res)=>res.json())

  const initData = res.slice(0,20).map((item) => {
    return {
      author : item.email,
      content : item.body,
      emotion : Math.floor(Math.random() * 5)+1,
      created_date : new Date().getTime(),
      id : dataId.current++
    }
  })

  setData(initData)
}

async/await 을 사용하여 비동기함수를 동기함수처럼 작동
=> 데이터를 가져온 후 setData(initData)의 작업을 실행
return을 사용하기때문에 current++(후위증가)를 통해 다음 item의 id값을 설정

i++ (후위증가) : 후위증가를 사용한 다음줄부터 증가된 값으로 사용
++i (전위증가) : 전위증가를 사용한 줄부터 증가된 값으로 사용

공부하며 정리&기록하는 ._. 씅로그