교제.비동기

const getArticles = async () => {
        return await api.get('/articles')
            .then((response) => response.data.data.articles)
    }

이 코드는 getArticles라는 비동기 함수를 정의하는 부분입니다. 이 함수는 서버로부터 게시물 목록을 가져오는 역할을 합니다. 여러 단계로 이해해보겠습니다.

async 키워드:
async 키워드는 함수가 비동기적으로 실행됨을 나타냅니다. 이 함수 안에서 await 키워드를 사용하여 비동기 작업을 처리할 수 있습니다.
api.get('/articles'):
api 객체를 사용하여 서버에 HTTP GET 요청을 보냅니다. 이 요청은 '/articles' 엔드포인트로 보내지며, 서버에서 게시물 목록을 가져옵니다.
await:
await 키워드는 비동기 작업이 완료될 때까지 기다리는 역할을 합니다. 여기서는 HTTP 요청이 완료되고 응답이 도착할 때까지 기다립니다.
.then((response) => response.data.data.articles):
HTTP 요청이 성공적으로 완료되면 반환된 응답 객체에 접근할 수 있습니다. 응답 객체의 data 속성에는 서버에서 보낸 데이터가 포함되어 있습니다. 일반적으로 이 데이터는 JSON 형식일 것입니다. 여기서는 응답 데이터 구조가 조금 복잡한 것으로 보입니다. data 속성 내부에 또 다른 data 속성이 있고, 그 안에 articles라는 속성이 있는 것으로 보입니다. 따라서 우리는 response.data.data.articles를 반환하여 실제 게시물 목록에 접근합니다.
함수 반환:
최종적으로, 게시물 목록이 포함된 Promise 객체가 반환됩니다. 이 함수를 호출하는 쪽에서는 이 Promise를 사용하여 게시물 목록에 접근할 수 있습니다.
이 함수는 주로 useQuery 훅에서 사용되며, 해당 훅은 이 함수를 사용하여 데이터를 가져와서 캐시하고 컴포넌트에게 반환합니다.