[PROJECT-JULABO-React] Uncaught TypeError: Cannot read properties of undefined (reading '0')

배열로 받아온 props에서 인덱스로 접근을 하려고 하니 다음과 같은 에러가 발생했습니다.

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

위와 같은 에러는 배열이 아닌 변수에 인덱스로 접근을 하려고 할 때 발생하게 되는데,
상위 컴포넌트에서도 콘솔에 찍어보고 하위컴포넌트에서도 찍어보아도 배열값이 분명히 넘어오는 것을 확인해도 인덱스로 접근하기만 하면 에러가 발생했습니다.

하지만 이때 undefined가 찍혀있는 것을 보고 만약 내가 접근하려고 하는 인덱스가 undefined 의 인덱스라면 에러가 발생하는게 당연하다 라는 생각이 들었습니다.

undefined가 나오게 된 이유는 처음 마운트가 되었을 때는 부모컴포넌트가 비동기 처리를 하고 있기 때문에 undefined로 들어오게 되고 비동기 처리가 끝나면 그제서야 값이 제대로 들어오게 되는데 처음 마운트가 되자마자 값을 받아서 접근하려고 하니 에러가 발생한 것이었습니다.

따라서 useEffect 부분에 조건문을 주어 검증을 거친 이후에 값을 주었더니 해결이 되었습니다.

useEffect(() => {
    setImgArr(productInfo.imageUrls);
    if (productInfo.imageUrls) {
      console.log(productInfo.imageUrls[0]);
    }
}, [setImgArr, productInfo.imageUrls]);

앞으로는 props로 받아오는 데이터가 비동기 처리를 통해 받아오는 데이터일 경우 검증을 하는 습관을 길러야 할 것 같습니다...