데이터베이스에서 데이터를 받아오는 중, `TS18048: avatars is possibly undefined` 문제가 발생했다.

 

아래 코드에서, getLostArkAvatars 함수를 통해 데이터베이스에서 avatars를 가져온 뒤, 이를 map을 사용하여 렌더링하려고 했습니다. 이때, 데이터베이스에서 반환된 avatars가 빈 배열일 수 있는 경우를 고려하지 않으면, 'TS18048: avatars is possibly undefined' 오류가 발생할 수 있습니다.

 

{avatars.map((avatar: ILostArkAvatar, index: number) => (
          <AccordionItem
            key={avatar?._id} // 각 항목에 고유한 key 할당
            value={`item-${index}`}
            className="text-2xl font-semibold text-white"
          >
            <AccordionTrigger>{avatar?.title}</AccordionTrigger>
            <AccordionContent>
              <Image
                width="0"
                height="0"
                sizes="100vw"
                className="h-auto w-full"
                src={avatar?.image}
                alt={avatar?.title}
              />
              {avatar?.description}
            </AccordionContent>
          </AccordionItem>
        ))}

 

따라서 avatars 배열에 대한 렌더링 전 && 연산자를 사용하여 avatars가 정의하고, 빈 배열이 아닌 경우에만 map 함수를 실행하게 함으로써 해당 문제를 해결할 수 있었습니다. 이 방식은 TypeScript가 배열이 비어있거나 정의되지 않았을 가능성을 감지할 때 유용합니다.

 

{avatars &&
          avatars.map((avatar: ILostArkAvatar, index: number) => (
            <AccordionItem
              key={avatar?._id} // 각 항목에 고유한 key 할당
              value={`item-${index}`}
              className="text-2xl font-semibold text-white"
            >
              <AccordionTrigger>{avatar?.title}</AccordionTrigger>
              <AccordionContent>
                <Image
                  width="0"
                  height="0"
                  sizes="100vw"
                  className="h-auto w-full"
                  src={avatar?.image}
                  alt={avatar?.title}
                />
                {avatar?.description}
              </AccordionContent>
            </AccordionItem>
          ))}