[React] Array.map() is a not function

오..류... 오히려 좋아....

하려고 했던 것

백엔드분들이 정성스럽게 만들어주신 베스트 상품 API를 받아와서 내 메인에 뿌려주고 보여드릴 생각에 신이 많이 났다.

하지만...

Objects, {} in JavaScript does not have the method .map(). It's only for Arrays, [].

ㅋ...

그래 일단 생존형 영어 실력으로 해석을 해봤다.

오브젝트는 map함수를 가지고 있지 않아 사용이 불가능하다. 오직 배열에서만 가능하다.

그래서 백엔드분께 여쭤봤다. 혹시 데이터가 들어올때 어떻게 들어오나요 ? 🙋
하고 봤는데, 오류가 말해주셨던대로 (프론트단에선)객체로 들어오고 있었다.

{
  result: [
    {
      id: 1,
      name: 'name',
      price: '11,000'
  	},
    {
      id: 2,
      name: 'name',
      price: '21,000'
  	},
    {
      id: 3,
      name: 'name',
      price: '31,000'
  	},
    ....
  ]
} 

객체로 들어오고 있었다 !!!!!

이걸 발견한 홍두현은 바로 vsc를 열고 useEffect에 fetch()를 찾아서 코드를 수정했다.

• 수정 전

useEffect(() => {
    fetch('소중한 API 주소 🖥 ')
      .then(res => res.json())
      .then(data => {
        setBestList(data);
      });
  }, []);

• 수정 후

useEffect(() => {
    fetch('소중한 API 주소 🖥 ')
      .then(res => res.json())
      .then(data => {
        setBestList(data.results);
      });
  }, []);

객체 형태의 result로 값이 들어왔기 때문에 dot notation으로 적어줘야한다. 그래도 예전에 객체에게 많이 당했던 과거가 있어서 계속 떠오른다... 떠오른다... dot notation...

당연히 data만 console.log에 찍어보면 뭐... 나오긴하는데 내가 원하는 답이 안나온다. 그리고 그걸 의심에 여지없이 map()을 돌려버린 나는 똥멍청이였다.... 하핫

하지만 이제 이 오류를 만나면 데이터가 들어오는 값을 좀 더 정확히 체크하고 확인할 수 있는 용기(?)가 생겼다.

후기

그러니 나와 같은 문제를 가진 분들은 데이터가 어떻게 들어오는지 먼저 확인하자 !!!!