TIL - map 함수는 배열에서만 사용 가능하다!

Problem 

map 함수 사용 불가 Property 'map' does not exist on type 'UserChallenges'.ts(2339)
→ 오류의 원인은 userChallenges의 초기값 설정! 타입스크립트로 프로젝트를 진행하면서 무의식 중에 타입을 지정하고 초기값을 아래와 같이 설정하여 데이터를 불러왔는데 이게 문제였다. 기본을 잊지말자....

  const [userChallenges, setUserChallenges] = useState<UserChallenges>({
    id: '',
    title: '',
    startDate: 0,
    endDate: 0,
    isCompleted: false,
  });
  
  return (
     {userChallenges?.map((item, index) => (
        <div key={item.id}>
          <div>{index + 1}</div>
          <div>{item.title}</div>
          <div>{item.startDate}</div>
          <div>{item.endDate}</div>
        </div>
      ))}
 )

 

Solve

map 함수는 객체가 아닌 배열에서만 사용이 가능하다!
→ .map 메서드는 배열에서만 사용할 수 있다. userChallenges를 배열로 수정해주고 map을 문제없이 사용할 수 있었다.

const [userChallenges, setUserChallenges] = useState<UserChallenges[]>([]);

  return (
     {userChallenges?.map((item, index) => (
        <div key={item.id}>
          <div>{index + 1}</div>
          <div>{item.title}</div>
          <div>{item.startDate}</div>
          <div>{item.endDate}</div>
        </div>
      ))}
 )