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

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

해결된 질문

작성

873

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

pages - index 파일

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

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 인자를 한 곳에서만 받도록 파일을 합칠까 합니다

react node.js graphql next.js

답변 1

노원두

지식공유자

안녕하세요! zero.1.0.one.xx님!

아래의 타입스크립트에서 '?'는 없을 수도 있음(undefined)을 의미해요!

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

따라서, 없을 수도 있는데 어떻게 사용하니? 라는 문구의 메시지가 현재 보여지고 있는 것이랍니다!

해결하는 방법으로는,
1. 있는지 없는지 체크해서, 없을때는 에러 알림을 보여주고 있으면 실행하기

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

있을때만 실행하기

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

zero.1.0.one.xx

질문자

1번 방법을 적용해서 해결했습니다 감사합니다

그런데 왜 2번 방법을 적용했을 때 해결되지 않을까요? 제가 뭘 잘못하고 있는 걸까요?

인프런 커뮤니티 질문&답변

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