key값이 없음을 해결과정

현재 게시글이나 댓글에서 사용하고 있는 리스트를 동아리이름으로 바뀐뒤에 사용하는데 아래 문구가 떳다.

Warning: Each child in a list should have a unique "key" prop.

'use client';

import Link from 'next/link';
import api from "@/util/api";
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function Club() {
    const queryClient = useQueryClient();

    const getClubs = async () => {
        const response = await api.get('/api/v1/clubs');
        return response.data.data.clubs || [];
    };

    const { isLoading, error, data = [] } = useQuery({
        queryKey: ['clubs'],
        queryFn: getClubs,
    });

    const deleteClub = async (id) => {
        await api.delete(`/api/v1/clubs/${id}`);
    };

    const mutation = useMutation({
        mutationFn: deleteClub,
        onSuccess: () => {
            queryClient.invalidateQueries(['clubs']);
        },
    });

    if (isLoading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    return (
        <DefaultLayout>
            <ul>
                {data.map((row) => (
                    <li key={row.id}>
                        {row.id} / <div>{row.clubName}</div> / {row.author} / {row.createdDate}
                        <button onClick={() => mutation.mutate(row.id)}>삭제</button>
                    </li>
                ))}
            </ul>
            <Link href="/clubCreate">Club Create 페이지로 이동</Link>
            <Link href="/articleCreate">Article Create 페이지로 이동</Link>
        </DefaultLayout>
    );
}

아래거로 하니까 된다.

'use client'

import Link from 'next/link';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import api from "@/util/api";
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function Club() {
    const getClubs = async () => {
        try {
            const response = await api.get('/api/v1/clubs');
            return response.data.data.club; // 수정된 부분
        } catch (error) {
            throw new Error('Failed to fetch clubs');
        }
    };
    

    const {isLoading, error, data} = useQuery({
        queryKey: ['clubs'],
        queryFn: getClubs
    });

    const deleteClub = async (id) => {
        await api.delete(`/api/v1/clubs/${id}`);
    };

    const queryClient = useQueryClient();
    const mutation = useMutation({
        mutationFn: deleteClub,
        onSuccess: () => {
            queryClient.invalidateQueries({queryKey: ['clubs']});
        }
    });

    if (error) {
        console.error(error);
    }

    if (isLoading) {
        return <>Loading...</>;
    }
    
    if (error) {
        console.error(error);
        return <>Error occurred: {error.message}</>;
    }
    
    if (!data || data.length === 0) {
        return <>No data available</>;
    }
    
    return (
        <DefaultLayout>
            <ul>
                
                {data.map((row) => (
                    <li key={row.id}>
                        {row.id} /{' '}
                        <Link href={`/club/${row.id}`}>{row.clubName}</Link> /{' '}
                        {row.author} / {row.createdDate}
                        <button onClick={() => mutation.mutate(row.id)}>
                            삭제
                        </button>
                    </li>
                ))}
            </ul>
            <Link href="/clubCreate">
                Club Create 페이지로 이동
            </Link>
            </DefaultLayout>
    );
}

뭐가 문제인지 확인해보자 한다.

return response.data.data.clubs || [];

return response.data.data.club;

이런식으로 다른데 2번째 것이 맞는 경로인거 같다.
그래서 undefined 문제가 발생한 것이었다.