'정의되지 않음'일 수 있는 개체를 호출할 수 없습니다 오류 질문

안녕하세요 과제 중 궁금한 점이 있어 질문 남깁니다

1. pages - index 파일

export default function DetailBoardPage(): JSX.Element {
  return (
    <>
      <DetailBoard></DetailBoard>
      <CommentWrite></CommentWrite>
      <CommentList></CommentList>
    </>
  );
}

2. board list presenter 파일

export default function CommentListItemUI(
  props: ICommentListItemUI
): JSX.Element {
  // 수정 아이콘 클릭 시 수정 화면으로 전환
  const [isEdit, setIsEdit] = useState(false);
  const onClickUpdateIcon = (): void => {
    setIsEdit(true);


  return (
    <>
      {!isEdit && (
           . . .
      )}
      {isEdit && (
        <CommentWrite
          item={props.item}
          isEdit={true}
          setIsEdit={setIsEdit}
        ></CommentWrite>
      )}
    </>
  );
}

CommentWrite 컴포넌트를 두 곳에서 사용하고 있습니다

1번에서는 아무런 props 인자를 넘겨주지 않고 있고요

2번에서는 3가지 props 인자를 넘겨주고 있습니다

types 파일

export interface ICommentWrite {
  item?: IBoardComment;
  isEdit?: boolean;
  setIsEdit?: Dispatch<SetStateAction<boolean>>;
}

이에 맞춰 작성한 interface 입니다

setIsEdit state에 ? 기호를 붙이니

CommentWrite 파일(바로 아래 파일)의 props.setIsEdit state 사용 구간에서 '정의되지 않음'일 수 있는 개체를 호출할 수 없다는 오류가 뜹니다

export default function CommentWrite(props: ICommentWrite): JSX.Element {

  const onClickUpdate = async (): Promise<void> => {
      . . .

      props.setIsEdit(false);

  };

  const onClickCancel = (): void => {
    props.setIsEdit(false);
  };

  return (
      . . .
  );
}

찾아보니 undefined / null 값을 제대로 다루지 못할 때 생기는 오류라고 하는데요

해당 state는 한 곳에서만 props 인자로 전달하고 있기 때문에 undefined 값이 나오는 경우가 필연적입니다

이런 경우 해결할 수 있는 방법이 있을까요?

만약 타입 지정과 관련된 방법으로 해결할 수 없는 문제라면 props 인자를 한 곳에서만 받도록 파일을 합칠까 합니다

interface IProps {
  setIsEdit?: () => void
}

if(props?.setIsEdit !== undefined){
  props.setIsEdit("철수") // 위 if문에서 props 안에 undefined가 있음이 확인됐으므로,
                         // 현재 라인에서는 옵셔널체이닝('?')가 없어도 됨
} else {
  alert("에러났어요!")
}

props?.setIsEdit("철수") // 옵셔널체이닝('?')을 통해 있을 때만 실행하기