'(string | null)[]' 형식의 인수는 'SetStateAction<string>' 형식의 매개 변수에 할당될 수 없습니다.

  const validateCertificate = (password: string) => {
    if (password.trim() === '') {
      return null;
    }
    if (certificationNum === password) {
      return 'pass';
    }
    return 'fail';
  };

  const handleSmsVerification = () => {
    setSmsVerification([
      validateCertificate(certificatedNumText),
      '인증번호가 일치하지 않습니다.',
    ]);
  };

핸드폰 문자인증에서 문자가 올바르게 인증되었는지 확인하는 로직이고, 이렇게 set된 state를 하위 컴포넌트에게 넘겨주려 했다.

 

그런데 다음 코드에서 타입오류가 났다. 알고보니, useState에는 빈 문자열을 초기값으로 전달했는데 실상 배열을 설정해주고있으니, 타입에러가 났던 것이다.

const [smsVerification, setSmsVerification] = useState<['pass' | 'fail' | null, string]>([null, '']);

다음과 같이, 설정될 수 있는 값을 제네릭에 포함시켜준 후 initialState도 타입에 맞게 설정해주면 해결된다.