터미널을 확인해보세요. 다음과 같이 객체가 두 번 출력됐나요? 참고로 14장에서 만든 Strapi 서버가 구동 중이어야 합니다(구동하려면 새 터미널에서 Strapi 서버 디렉터리로 이동하여 yarn develop 명령어를 입력하세요).

LOG  {"data": undefined, "isLoading": true}
LOG {"data": [{"body": "Bye World", "created_at": "2021-03-14T17:07:33.673Z", "id": 2, "published_at": "2021-03-14T17:07:33.670Z", "title": "Bye World", "updated_at": "2021-03-14T17:21:06.351Z", "user": [Object]}, {"body": "Hello World", "created_at": "2021-03-14T17:18:24.522Z", "id": 3, "published_at": "2021-03-14T17:18:24.520Z", "title": "Hello World", "updated_at": "2021-03-14T17:18:24.530Z", "user": [Object]}], "isLoading": false}

컴포넌트가 렌더링되는 시점에 요청이 시작되며, isLoading이 true가 됩니다. 요청이 끝나면 data 값이 결과 데이터로 채워지며, isLoading 값이 false가 됩니다.

이때 다음과 같은 경고가 나타날 텐데요.

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.

리액트 쿼리에서 cacheTime 부분 때문에 5분짜리 타이머가 돌고 있어서 그렇습니다. 이는 문제가 되지 않으니 무시해도 됩니다. 하지만 이 경고가 자꾸 나타나는 것이 거슬린다면 index.js 파일에서 LogBox를 사용하여 위 경고를 무시하도록 처리할 수 있습니다.