내일배움캠프 TIL 72일차

리액트 오류 

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

=> 배열이 비어있을 때 발생하는 오류. product.images배열의 첫 번째 요소를 참조하려고 하지만 비어있어서 오류 발생

 

해결 방안 : 조건부 렌더링 해주기!

{product.images.length > 0 ? (
              <div className='product-detail-img'>
                <img src={`http://localhost:8000${product.images[0]['image_file']}`} alt={product.name} />
              </div>
            ) : null}

다음과 같이 조건을 설정해주면 이미지 배열이 비었을 경우에 이미지를 렌더링하지 않고 null을 반환하기 때문에 에러가 발생하지 않는다