SignupModal showMessage 함수 파라미터 타입 질... - 인프런

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

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

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

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

안녕하세요, 인프런 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 "아이디를 입력하세요.";
  }
  /* 나머지 처리 로직 ... */
}

강의에서 제로초님이 이런 문제에 직면하지 않은 이유는 강의에서 제시된 코딩 환경이나 타입스크립트 버전 차이에 있을 수 있습니다. 강의 내에서 사용된 타입스크립트 설정이나 각종 라이브러리의 버전에 따라 이러한 타입 에러가 발생하지 않을 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

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