{data.map((row) => (주어진 코드에서 data.map((row) => ( 부분에서 row는 useQuery 훅을 통해 비동기적으로 불러온 데이터의 각 항목을 가리킵니다.
여기서 data는 useQuery 훅을 통해 비동기적으로 불러온 결과물을 의미하고, 이 데이터는 getArticles 함수를 통해 API에서 가져온 게시물 목록입니다.
data.map((row) => (는 가져온 게시물 목록을 순회하며 각각의 게시물 정보를 표시하는데 사용됩니다. 따라서 row는 각 게시물의 데이터를 나타냅니다.
const {isLoading, error, data} = useQuery({
queryKey: ['articles'],
queryFn: getArticles
}); 여기서 가져왔다는 거야?
ChatGPT
네, 맞습니다.
주어진 코드에서 useQuery 훅은 비동기적으로 데이터를 가져오는 역할을 합니다. 이 훅은 첫 번째 매개변수로 객체를 받는데, 여기서 queryKey는 쿼리를 고유하게 식별하는 데 사용되며, queryFn은 실제 데이터를 가져오는 비동기 함수를 나타냅니다.
따라서 const {isLoading, error, data} = useQuery({ queryKey: ['articles'], queryFn: getArticles }); 라인은 useQuery 훅을 사용하여 'articles' 쿼리를 호출하고, 이를 위해 getArticles 함수가 사용된다는 것을 나타냅니다. 결과적으로 data에는 getArticles 함수에서 반환된 데이터가 할당됩니다.
비동기(asynchronous)는 한 작업이 다른 작업과 독립적으로 실행되는 것을 의미합니다. 일반적으로 프로그램이 순차적으로 실행되는 것과 달리, 비동기적 작업은 실행되는 동안 다른 작업을 계속할 수 있습니다.
예를 들어, 웹 애플리케이션에서 API 요청을 보내는 작업은 일반적으로 비동기적으로 처리됩니다. 이 경우, 요청이 보내지고 서버로부터 응답이 올 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다. 이렇게 함으로써 애플리케이션은 더욱 효율적으로 작동할 수 있습니다.
{data.map((row: ArticleDto) => (
<li key={row.id}>
{row.id} /{' '}
<Link href={`/article/${row.id}`}>{row.subject}</Link> /{' '}
<button onClick={() => mutation.mutate(row.id)}>
삭제
</button>일단 이렇게 해주고 생성일과 권한은 빼줌
