[Today's Bug] Cannot read properties of undefined (reading 'xxx')

📢 이 버그 좀 보세요!

다른 페이지에서는 잘 돌아가는 toDate 함수가 갑자기 properties를 찾을 수 없다며 오류가 났다. 구글링해보니 제일 많이 발생하는 오류 top 10에 속한다고 한다.

🐞 버그가 나타난 이유?

처음 페이지가 마운트 될 때 View의 props는 undefined 상태이기 때문에 undefined.toDate()가 properties of undefined 에러가 떴다. 

🕸 어떻게 이 버그를 잡을까?

&&연산자를 이용하자. &&을 통해 props를 통해 받은 값의 유무를 체크한 뒤에 아래 소스에서 selectedValue.grt_date가 undefined일 경우에는 뒤에 toDate()함수를 타지 않도록 처리한다. 

function View(props) {
    const { onClose, selectedValue, open } = props;
  
    const handleClose = () => {
      onClose(selectedValue);
    };
  
    const handleItemClick = (value) => {
      onClose(value);
    };
  
    return (
      <Dialog onClose={handleClose} open={open} PaperProps={{
        style: {
          backgroundImage:`url("/assets/img/${selectedValue.grt_img}.jpg")`,  
        },
      }}>
      <DialogTitle>{selectedValue.grt_title}</DialogTitle>
        <DialogContent>{selectedValue.grt_contents}</DialogContent>
        <DialogContent>{selectedValue.grt_date !== null ? selectedValue.grt_date && common.timestamp(selectedValue.grt_date.toDate()) : null} {selectedValue.grt_user_id}로부터</DialogContent>
        <Button onClick={()=> handleItemClick()}>닫기</Button>
      </Dialog>
    );

    
  }