[React] cannot read properties of undefined (reading '컬럼명') 오류

문제

: cannot read properties of undefined(reading '컬럼명')

 

<TableRow key={i}>
    <TableCell sx={ {border : '1px solid #e0e0e0', bgcolor : '#ebebeb'} } align='left'>{e.컬럼명1}</TableCell>
    <TableCell sx={ {border : '1px solid #e0e0e0'} } 
    align={'center'}>{e.컬럼명2}</TableCell>

    <TableCell sx={ {border : '1px solid #e0e0e0', bgcolor : '#ebebeb'} } align='left'>{data[i+1].컬럼명1}</TableCell>
    <TableCell sx={ {border : '1px solid #e0e0e0'} } 
    align={'center'}>{data[i+1].컬럼명2}</TableCell>
</TableRow>

• data[i+1].컬럼명에서 에러 발생
• 데이터가 아직 들어오직 않았거나, 데이터를 변경되는 시점에 렌더링이 실행되어 i+1에 있어야 할 데이터가 undefined로 정의되어 오류 발생
  
  

문제 해결

: && 를 이용하여 해결

{
data[i+1] && (
<>
    <TableCell sx={ {border : '1px solid #e0e0e0', bgcolor : '#ebebeb'} } align='left'>{data[i+1].컬럼명1}</TableCell>
    <TableCell sx={ {border : '1px solid #e0e0e0'} } 
    align={'center'}>{dadta[i+1].컬럼명2}</TableCell>
</>
)
}

• { true && expression } 은 항상 expression
• { false && expression }은 항상 false