[ReactJS] 백에서 GET method를 통해 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0')

🚨 문제 상황

팀 프로젝트 중 백엔드 서버에 필요한 데이터를 요청하여 받은 후, 이 정보를 가공해서 화면에 렌더링해주는 작업이 여러 번 있었다. 이 때 자주 골치를 아프게 했던 에러가 하나 있어 포스트로 남긴다.

 

const ReservationPage = () => {
  const [lectureData, setLectureData] = useState({});

  // 백에서 상품 디테일 데이터 수신
  useEffect(() => {
    fetch(`/data/reservationData.json`, {
      method: 'GET',
    })
      .then(response => response.json())
      .then(data => {
        setLectureData(data);
      });
  }, []);

  if (lectureData === {}) {
    return null;
  }

  ...
}

 

우선, fetch 함수를 통해 백엔드로부터 아래와 같은 구조의 JSON 데이터를 받았다.

 

{
  "data": [
    {
      "images": "aimage",
      "lectureDate": [
        {
          "isReserved": 0,
          "lectureDate": "2022, 12, 23",
          "lectureTimeOptionId": 1
        }
      ],
      "lectureId": 1,
      "lectureText": "위슐랭 스타 셰프 김호준의 비밀 레시피 훔쳐오기",
      "lectureTitle": "위슐랭 3스타 쉐프 김호준의 비밀 레시피",
      "lecturerName": "Georgeta",
      "price": "70000"
    }
  ]
}

 

이 데이터를 활용하기 위해 구조 분해 할당 이용하여 아래와 같은 코드를 작성하였다.

 

  // 백에서 받은 데이터 객체 구조 분해 할당
  const data = lectureData.data;
 
  const { lectureId, lectureTitle, lectureText, lecturerName, price, images } =
    data[0];

 

하지만 코드를 실행해보니 다음과 같은 에러가 발생했다.

Uncaught TypeError: Cannot read properties of undefined (reading '0')

undefined인 값을 읽을 수 없다. 즉, 백엔드에서 받아온 데이터가 변수에 할당되지 않는 문제가 발생하였다.

 

---

💡 문제 해결 및 과정

이유는 모르겠으나, 백에서 받아온 데이터를 구조 분해 할당할 때, 아래처럼 배열의 index 값으로 접근하면 값이 읽혀지지 않는 문제가 생긴다고 한다.

const { lectureId, lectureTitle, lectureText, lecturerName, price, images } = data[0];

 

따라서 백에서 받아온 데이터를 구조 분해 할당 시, 배열의 index로 접근하지 않도록 해야한다.

하지만 백에서 만든 데이터에 배열 구조가 불가피하게 들어가야 하는 상황은 자주 있다. 이럴 땐 어떻게 해야하는가?

 

만일 데이터에 꼭 index로 접근해야만 하는 상황이라면 setState의 Modifier 함수 인자 내부에서 (index로) 접근해주면 된다.

 

const ReservationPage = () => {
    const [lectureData, setLectureData] = useState([]);
    const [reservation, setReservation] = useState('');
    const { lectureId } = useParams();

    // 백에서 상품 디테일 데이터 수신
    useEffect(() => {
      fetch(`http://10.58.52.141:3000/lectures/${lectureId}/reservations`, {
        method: 'GET',
      })
        .then(response => response.json())
        .then(data => {
          // 이 곳에서 인덱스로 접근하는 것은 OK
          setLectureData(data.data[0]);
        });
    }, []);

    // 백에서 받은 데이터 객체 구조 분해 할당
    const { lectureId, lectureTitle, lectureText, lecturerName, price, images } =
      lectureData;
      
    ...
  }

 

---

💬 느낀 점

논리적인 절차대로라면 아무런 문제없이 코드가 정상적으로 동작해야 할 텐데, 그렇지 않아서 참으로 답답했던 에러였다. 멘토님도 정확한 이유를 모르셨고 구글링을 해봐도 원하는 답을 얻을 수 없어서 참으로 아쉬웠다.