[React] Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러

문제의 코드

import React, { useState, useEffect } from "react";
export defaul function component(){
	const [list, setList] = useState([]);
	 const record = async () => {
      const res = await getWorkerList({
        siteId: "사이트아이드",
        pagePerSize: 5,
        pageIndex: 1,
      });
      setList(res.list)
    };
}
useEffect(() => {
    record();
  }, []);
return(
{list.map((data,i)=>{
            return (
              <div>
                <span>{data.genderName}</span>
                <span>{data.occupationName}</span>
                <span>{data.deptName}</span>
                <span>{data.age}</span>
                <span>{data.workerName}</span>
              </div>
            )
          })}

)

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러 발생

에러 발생한 이유

res에 data 안쪽에 list가 있어 undefined 값이 출력

문제 해결

import React, { useState, useEffect } from "react";
export defaul function component(){
	const [list, setList] = useState([]);
	 const record = async () => {
      const res = await getWorkerList({
        siteId: "사이트아이드",
        pagePerSize: 5,
        pageIndex: 1,
      });
      setList(res.data.list)
    };
}
useEffect(() => {
    record();
  }, []);
return(
{list.map((data,i)=>{
            return (
              <div>
                <span>{data.genderName}</span>
                <span>{data.occupationName}</span>
                <span>{data.deptName}</span>
                <span>{data.age}</span>
                <span>{data.workerName}</span>
              </div>
            )
          })}

)

map 함수를 사용하기전에 res를 콘솔창에 출력후 한번더 확인을 한다.