해결된 질문
작성
·
873
0
안녕하세요 과제 중 궁금한 점이 있어 질문 남깁니다
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 인자를 한 곳에서만 받도록 파일을 합칠까 합니다
답변 1
0
안녕하세요! zero.1.0.one.xx님!
아래의 타입스크립트에서 '?'는 없을 수도 있음(undefined)을 의미해요!
interface IProps {
setIsEdit?: () => void
}
따라서, 없을 수도 있는데 어떻게 사용하니? 라는 문구의 메시지가 현재 보여지고 있는 것이랍니다!
해결하는 방법으로는,
1. 있는지 없는지 체크해서, 없을때는 에러 알림을 보여주고 있으면 실행하기
if(props?.setIsEdit !== undefined){
props.setIsEdit("철수") // 위 if문에서 props 안에 undefined가 있음이 확인됐으므로,
// 현재 라인에서는 옵셔널체이닝('?')가 없어도 됨
} else {
alert("에러났어요!")
}
있을때만 실행하기
props?.setIsEdit("철수") // 옵셔널체이닝('?')을 통해 있을 때만 실행하기
1번 방법을 적용해서 해결했습니다 감사합니다
그런데 왜 2번 방법을 적용했을 때 해결되지 않을까요? 제가 뭘 잘못하고 있는 걸까요?