React에서 API호출하기

자바스크립트 내장함수인 fetch()를 사용해 API를 호출하고, API의 응답 데이터를 App컴포넌트가 가지고 있는 일기 데이터인 data state에 저장해서 일기데이터의 초기값을 설정해보기

무료로 API서비스를 제공해서 테스트를 할 수 있게 도와주는 사이트 (https://jsonplaceholder.typicode.com/)

1. getData()함수를 async를 사용하여Promis를 반환하는 비동기 함수로 만들고, API호출하여 사용하기
2. fetch('API_URL')로 API를 호출하고, res.json()을 통해 우리가 원하는 데이터인 json값들만 뽑아와. const res 상수에 저장.
3. res 상수에 저장된 값을 통해서 일기데이터의 기초값을 설정할거임.
   const initData라는 상수 하나를 만들고, res를 slice(0, 20)를 이용해 20개만 추리기, 그리고 map함수를 이용해 모든 res값 안의 배열의 각각 모든 요소를 순회해서 이 map함수의 콜백함수 안에서 일기데이터 값의 객체를 리턴하고 initData에 저장
4. 완성된 initData는 setData()에 저장하기 -> setData(initData)
5. 마지막으로 useEffect를 통해 Mount되는 시점에 수행할 콜백함수에 getData()를 호출 (등장시 딱 한번만 실행 될 수 있도록)

API의 데이터를 적절히 가공하여 일기데이터 초기값을 API를 통해서 설정하게됨.

    // React에서 API호출하여 사용하기
    const getData = async () => {
        const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res) => {
            return res.json();
        })
        // 0~19까지 인덱스를 짜고, map()함수 돌리기
        const initData = res.slice(0, 20).map((res) => {
            return {
                author: res.email,
                content: res.body,
                emotion: Math.floor(Math.random() * 5) + 1, // 0~5까지 랜덤수 추출
                create_date: new Date().getTime(),
                id: dataId.current++ // dataId를 현재 current값으로 넣고나서 ++을 통해 1을 더함
            }
        })
        // API로 가공한 데이터를 일기데이터에 초기값으로 저장
        setData(initData);
    }

    // Mount되는 시점에 바로 한번 실행
    useEffect(() => {
        // Mount되는 시점에 수행할 콜백함수에 getData()라고 API를 호출하는 함수를 적용 
        getData();
    }, [])