목차

문제가 있던 코드 첫 번째 Case

<CommonHeader
	headText={getStringDate(detailData.date).dataString()}
	leftChild={<Button text={"< 뒤로가기"} onClick={goBack} />}
	rightChild={<Button text={"수정하기"} onClick={goEdit} />}
></CommonHeader>

Header 컴포넌트에 Props로 전달한 Clouser함수에 문제가 생겼다. 이때 detailData.data의 값이 읽히지 않는다는 에러가 계속해서 발생했다.

정의되지 않은 속성을 읽을 수 없습니다.

DetailContainer.js:42 Uncaught TypeError:
Cannot read properties of undefined (reading 'date')

왜 정의되지 않은 속성일까?

const [detailData, setDetailData] = useState();

그 이유는 commonHeader 컴포넌트가 마운트 되는 시점에 detailData객체에는 아무런값도 할당이 되지 않았기 때문이다.

첫 번째 Case 해결방법 1 - 초기값에 객체 할당하기

const [detailData, setDetailData] = useState([]);
// 빈 객체 할당

headText={getStringDate(detailData.date).dataString()}

현재 초기값에 아무런 값도 할당이 되어있지 않기 때문에 정의되지 않은 속성의 값을 읽을 수 없다는 에러가 발생한다. 하지만 빈 값을 할당할 경우에 처음 마운트가 될 경우 빈 객체가 할당이 되며 에러가 발생하지 않는다.

스크린샷 2022-03-29 09.50.53.png

첫 번째 Case 해결방법 2 - && 연산자를 사용하기

headText={getStringDate(detailData && detailData.date).dataString()}

스크린샷 2022-03-29 09.53.04.png

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했다고 한다. 그런데 이렇게 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있다고 한다.

첫 번째 Case 해결방법 3 - 옵셔널 체이닝 연산자 활용하기

const [detailData, setDetailData] = useState();
// 다시 useState의 값에 아무런 속성도 정의하지 않았다
...
headText={getStringDate(detailData?.date).dataString()}
...