SignupModal showMessage 함수 파라미터 타입 질문입니다.

Question

SignupModal 만드는 과정에서 질문이 있습니다.

useFormState 훅을 사용할 때 계속 에러가 나서 signup.ts 파일을 커뮤니티를 참고해서 수정해줬습니다. return {message: null } 을 추가해주는 식으로요.

그러고나서 showMessage 함수를 만드는데, 강의에서는 showMessage 함수의 파라미터의 타입이 string 이라고 하는데 제 꺼에선 실제로 들어가는 값이 string | null 이라고 나오면서 에러가 발생합니다.

초기 state 도 { message: null } 이고, signup.ts 에서도 { message: null } 을 리턴하는 경우가 있어서 이런 것 같은데 제로초님은 강의에서 showMessage 함수의 파라미터 타입을 그냥 string으로 해도 에러가 나지 않는 것이 신기하여 질문 남겨봅니다.

제로초(조현영) · Answer

이거 저도 나중에 보니 에러나고 있어서 배포 직전에 수정했었습니다 ㅎㅎ

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 제로초님의 강의를 수강하시면서 발생한 showMessage 함수의 파라미터 타입에 관련된 질문에 대한 답변을 찾으실 수 있도록 돕겠습니다. 사용자님이 마주하고 계신 상황은 파라미터의 타입이 string | null 이어야 할 것 같은데, 실제로는 string 으로 선언되어 있어서 TypeScript에서 에러가 나는 경우로 보입니다. 아래는 유사한 질문에 대한 제로초님의 답변입니다. 에러 해결 방법과 관련하여 확인하실 수 있을 것입니다. 타입스크립트 질문 : useFormState 의 initialState 를 처리할 때 string | null 로 타입을 변경하는 문제에 대한 질문입니다. 반환값의 타입에서도 이와 같은 문제를 해결한 방법이 있을 수 있으니 참고해 보시기 바랍니다. 정리하자면, showMessage 함수의 파라미터 message 가 string 또는 null 을 받을 수 있도록 타입을 string | null 로 선언하는 것이 타입스크립트의 타입 안정성 측면에서 올바른 접근입니다. 따라서 함수 선언 부분에서 message 의 타입을 다음과 같이 변경하시면 됩니다: function showMessage(message: string | null) { if (message === "no_id") { return "아이디를 입력하세요."; } /* 나머지 처리 로직 ... */ } 강의에서 제로초님이 이런 문제에 직면하지 않은 이유는 강의에서 제시된 코딩 환경이나 타입스크립트 버전 차이에 있을 수 있습니다. 강의 내에서 사용된 타입스크립트 설정이나 각종 라이브러리의 버전에 따라 이러한 타입 에러가 발생하지 않을 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.