[2025.04.03] 다사다난했던 결과 호출하기

1.

 console.log('검색어:', keyword);

  const { data, error, isLoading } = useQuery<SearchData[], Error>({
    queryKey: ['searchResults'],
    queryFn: () => getSearchResultApi(keyword),
  });

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

  if (error) {
    console.error('Error fetching search results:', error);
    return <p>에렁에렁</p>;
  }

  if (!data) {
    return <p>노 결과에영</p>;
  }

  console.log('data:', data);
  console.log('data.length:', Object.values(data).length);

이렇게 했더니 

data: {seriesDetailDTOList: Array(30), authorDTOList: Array(0)} 이렇게 콘솔창에 띄워져서 제대로 호출이 된 줄 알고 리턴문 작성

return (
    <>
      {data && 
        data.map((item, index) => {
          console.log('넘어오나 테스트~!!!!!!!');
          console.log('item:', item);
          return (
            <div key={index}>
              <h2>작품</h2>
              {data &&
                item.seriesDetailDTOList.map((work, workIndex) => (
                  <div key={workIndex}>
                    <p>{work.title}</p>
                    <p>{work.description}</p>
                    <p>{work.viewCount}</p>
                    <p>{work.likeCount}</p>
                    <p>{work.bookmarkCount}</p>
                    <p>{work.tags}</p>
                    <img src={work.coverImageUrl} alt={work.title} />
                  </div>
                ))}
              <h2>작가</h2>
              {data &&
                item.authorDTOList.map((author, authorIndex) => (
                  <div key={authorIndex}>
                    <p>{author.authorName}</p>
                    <p>{author.description}</p>
                    <p>{author.seriesCount}</p>
                    <img src={author.profileImageUrl} alt={author.authorName} />
                    <p>{author.links}</p>
                    <p>{author.tags}</p>
                  </div>
                ))}
            </div>
          );
        })}
    </>
  );

이렇게 출력하는데 자꾸 TypeError: data.map is not a function이 떠서 data &&도 넣어보고 data.length > 0 && 도 넣어봤다.

첫 번째는 마찬가지로 타입에러가 뜨고 두 번째는 멀쩡한데 map으로 돌린 게 안 떴다.

 

설마 첫 번째 배열이 빈 배열인데 빈 배열을 map으로 돌리려고 해서 그런 가 해서 조건문을 작성했다.

그런데도 여전해서 빈 배열이 문제가 아닌 것을 인지했다.

 

이를 이상하게 생각하고 애초에 이게 잘 작동하나 콘솔로그 / p태그를 넣어봤더니 진입조차도 못해서 data.length > 0에 문제가 있다고 생각이 도출됨

그렇게 콘솔로그 data.length를 쳤더니 unfifined가 나옴. 분명 30개가 있는데 이상해서 검색해보니 이게 object여서 출력이 그렇게 나왔던 것이었다.

console.log('data.length:', Object.values(data).length); //'data.length:', data.length로 했는데 undifined가 나옴 찾아보니 객체 배열이라 object.으로 출력해야한다고 함

 

이렇게 하니 정상적으로 2개라고 떴다. 근데 2개? 

데이터를 잘 살펴보니 

export interface SearchData {
  seriesDetailDTOList:
    {
      id: number;
      authorId: number;
      authorName: string;
      title: string;
      coverImageUrl: string;
      description: string;
      type: string;
      viewCount: number;
      likeCount: number;
      bookmarkCount: number;
      tags: string[];
    },
  authorDTOList:
    {
      id: number;
      authorName: string;
      seriesCount: number;
      description: string;
      links: string;
      tags: string;
      profileImageUrl: string;
    },
}

export interface SearchProps {
  search: SearchData[];
}

이런 식으로 돼있어서 2개라고 나왔던 것이었다.

게다가 이건 배열이기 때문에 위처럼 타입을 지정해주면 문제가 생긴다. 객체배열이기 때문에

export interface SearchData {
  seriesDetailDTOList:
    {
      id: number;
      authorId: number;
      authorName: string;
      title: string;
      coverImageUrl: string;
      description: string;
      type: string;
      viewCount: number;
      likeCount: number;
      bookmarkCount: number;
      tags: string[];
    }[],
  authorDTOList:
    {
      id: number;
      authorName: string;
      seriesCount: number;
      description: string;
      links: string;
      tags: string;
      profileImageUrl: string;
    }[],
}

export interface SearchProps {
  search: SearchData[];
}

이렇게 해줘야 한다.

 

여튼 이것도 해결하고 계속 해보는데도 안 돼서 잘 생각해보니 이건 객체이기 때문에 map이 안 통했던 것.

즉 객체 안의 배열을 map으로 돌려야 하는데 data.~~로 바로 하니까 문제가 자꾸 생겨서 찾아보니 SearchData[] 로 또 해서 문제가 생겼던 것이었다. 이건 배열이 아니라 객체니까...... 

 

결론

객체를 배열처럼 취급하고 타입지정, map돌리기, 데이터 가져오기를 했기 때문에 내가 여태까지 짰던 코드들이 무슨 짓을 해도 작동 안 하고 이상하게 돌아갔다는 것.

 

'use client';

import { getSearchResultApi } from '@/api/works';
import { SearchData } from '@/api/works/type';
import { useQuery } from '@tanstack/react-query';

import resultWork from './resultWorks/resultWork';

interface ResultProps {
  keyword: string;
}

const Result = ({ keyword }: ResultProps) => {
  console.log('검색어:', keyword);

  const { data, error, isLoading } = useQuery<SearchData, Error>({
    queryKey: ['searchResults'],
    queryFn: () => getSearchResultApi(keyword),
  });

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

  if (error) {
    console.error('Error fetching search results:', error);
    return <p>에렁에렁</p>;
  }

  if (!data) {
    return <p>노 결과에영</p>;
  }

  console.log('data:', data);
  console.log('data.length:', Object.values(data).length); //'data.length:', data.length로 했는데 undifined가 나옴 찾아보니 객체 배열이라 object.으로 출력해야한다고 함

  //리액트 쿼리 유즈 이펙트를 언제 사용하는지도 알아보기

 return (
   <>
     {data && (
       <div>
         <h2>작품</h2>
         {Array.isArray(data.seriesDetailDTOList) && data.seriesDetailDTOList.length > 0 ? (
           data.seriesDetailDTOList.map((work, workIndex) => (
             <div key={workIndex}>
               <p>{work.title}</p>
               <p>{work.description}</p>
               <p>{work.viewCount}</p>
               <p>{work.likeCount}</p>
               <p>{work.bookmarkCount}</p>
               <p>{work.tags.join(', ')}</p>
               {work.coverImageUrl && <img src={work.coverImageUrl} alt={work.title} />}
             </div>
           ))
         ) : (
           <p>작품 정보가 없습니다.</p>
         )}

         <h2>작가</h2>
         {Array.isArray(data.authorDTOList) && data.authorDTOList.length > 0 ? (
           data.authorDTOList.map((author, authorIndex) => (
             <div key={authorIndex}>
               <p>{author.authorName}</p>
               <p>{author.description}</p>
               <p>{author.seriesCount}</p>
               {author.profileImageUrl && <img src={author.profileImageUrl} alt={author.authorName} />}
               <p>{author.links}</p>
               <p>{author.tags}</p>
             </div>
           ))
         ) : (
           <p>작가 정보가 없습니다.</p>
         )}
       </div>
     )}
   </>
 );

};

export default Result;

export interface SearchData {
  seriesDetailDTOList:
    {
      id: number;
      authorId: number;
      authorName: string;
      title: string;
      coverImageUrl: string;
      description: string;
      type: string;
      viewCount: number;
      likeCount: number;
      bookmarkCount: number;
      tags: string[];
    }[],
  authorDTOList:
    {
      id: number;
      authorName: string;
      seriesCount: number;
      description: string;
      links: string;
      tags: string;
      profileImageUrl: string;
    }[],
}

이렇게 객체로 해주니 

잘 나온다.....ㅋㅋ 하 놔 ㅋㅋㅋㅋㅋㅋ

 

추가로 

   <Result resultKeyword={keyword} />
   
   '{ resultKeyword: string; }' 형식은 'IntrinsicAttributes & ResultProps' 형식에 할당할 수 없습니다.
  'IntrinsicAttributes & ResultProps' 형식에 'resultKeyword' 속성이 없습니다.

 

resultKeyword로 하니 오류 걸렸다. 왜냐면 Result에서 props를

interface ResultProps {
  keyword: string;
}

const Result = ({ keyword }: ResultProps) => {

이렇게 받고 있어서 그런 것 같다.