어떤 문제 : WHAT?

• 서버에서 받아온 메인쪽의 데이터를 map함수로 돌려줬을 때 아래와 같은 에러가 난다.
  

왜 발생 : WHY?

• 일단 2가지 문제가 있다.

• data를 처음 받아오기 전까지 useState의 초기값이 아래와 같다.

  const [allRoadmapData, setAllRoadmapData] = useState([]);

• 아래와 같이 map을 해줄 떄 아무것도 map해줄게 없는 문제점이 하나있었고

   {!allRoadmapData
               ? '아직 만들어진 로드맵이 없습니다.'
               : allRoadmapData.map((article) => (

• reactquery로 데이터를 받아올 때 아래 그림처럼 json 키data의 값들을 배열로 돌려줘야하는 문제가 하나 있었다.
  

• 수정 이전 코드

    useEffect(() => {
     getAllRoadmap();
     console.log('roadmaps', roadmaps);
     if (roadmaps.data !== undefined) {
       setAllRoadmapData(roadmaps?.data);
     }
   }, [getAllRoadmap, roadmaps]);

  해결 : HOW?

• roadmap.data가 undefined에서 roadmaps안에 data라는 키가 있을 때 값을 할당

    useEffect(() => {
     getAllRoadmap();
     console.log('roadmaps', roadmaps);
     if ('data' in roadmaps) {
       setAllRoadmapData(roadmaps.data);
     }
   }, [getAllRoadmap, roadmaps]);