구현하려는 것
코멘트에는 총 세가지 단계(읽기 전, 읽는 중, 읽은 후)가 있는데, 읽기 전 코멘트가 작성되기 전에는 나머지 두 코멘트 영역은 비활성화 되어 있다.
일단 조건부 렌더링이 잘 되는지 확인하기 위해 간단히 조건에 따라 텍스트 컬러를 다르게 주었다. 위 코드의 'preContent'가 읽기 전 코멘트에 대한 데이터이다. 하지만 위처럼 작성하니 아래처럼 에러가 발생했다.
bookContent가 정의되지 않아서 발생하는 에러이기 때문에 bookContent가 정의되지 않았을 경우를 처리해주어야 한다.
이때 bookContent 뒤에 ?를 추가하면 preContent 속성에 액세스하기 전에 bookContent가 정의되어 있는지 확인 후, bookContent가 정의되지 않은 경우에 오류를 발생시키는 대신 정의되지 않은 상태로 반환해준다.
수정하니 bookContent의 값이 없을 때에도 컴포넌트가 제대로 렌더링 된다.
