[React/TypeScript] Input의 event.target.value을 string이 아닌 특정 타입으로 명시할 수 있을까?

안녕하세요. 캡스톤 프로젝트 중 경험한 Trouble Shooting을 공유해보고자 글을 작성하게 되었습니다!

 

다들 구글 폼, 네이버 폼과 같은 서비스를 많이 이용해보셨을까요?

현재 진행 중인 캡스톤 프로젝트에서 학생들에게 행사 참여 신청를 받기 위한 폼 (설문) 서비스를 제공하기 위해, 폼 생성 페이지를 직접 만들게 되었는데요.

폼 생성 페이지에서는 많은 이벤트들(추가, 삭제, 수정 등)이 이루어지므로, 이에 따라 여러 Input 컴포넌트들의 상태를 업데이트해줘야 해서 신경 쓸 부분이 많은 페이지라 볼 수 있습니다. 타입스크립트까지 이용한다면 Type Guard까지 신경써줘야 하는데요🥲

캡스톤 프로젝트 폼 생성 페이지

 

 

 

 

폼 생성 페이지에서는 useState로 관리되는 questionList를 맵핑하여 질문 박스 컴포넌트들을 렌더링합니다.

const [questionList, setQuestionList] = useState<Question[]>([]);

질문 박스 컴포넌트

questionList를 구성하는 Question의 타입은 아래와 같이 정의하였습니다.

type Question = {
  type: QuestionType;
  title: string;
  description: string;
};
type QuestionType = 'SUBJECTIVE' | 'MULTIPLE'; // 주관식, 객관식

 

질문 박스 컴포넌트를 보시면 질문 유형을 선택하는 주관식/객관식 버튼을 볼 수 있습니다. 이 라디오 input을 클릭시 onChangeEvent 핸들러는 questionList[해당 인덱스]의 type property를 업데이트해야 하므로 다음과 같이 작성하였습니다.

                  <input
                    className="hidden"
                    name={`question-type-${index}`}
                    type="radio"
                    value={questionList[index].type}
                    onChange={(e) => {
                      setQuestionList((prev) => {
                        return [
                          ...prev.slice(0, index),
                          { ...prev[index], type: e.target.value },
                          ...prev.slice(index + 1),
                        ];
                      });
                    }}
                    checked={questionList[index].tag === type}
                  />
                  {icon}
                </label>

Type '{ type: string; title: string; description: string; }' is not assignable to type 'Question'. Types of property 'type' are incompatible. Type 'string' is not assignable to type 'QuestionType'.

그러나 onChange 이벤트 핸들러에서 타입 오류가 발생하였습니다.

 

 

e.target.value의 타입이 string이므로 QuestionType과 적합하지 않다는 오류인데요.

커서를 대서 확인해보니 e.target.value가 string으로 지정되어 있는 것을 확인할 수 있습니다.

 

 

그렇다면 value의 부모인 Change Event의 타입을 직접 지정할 수 있을까요?

 

네! input의 기본 속성을 상속하고 Change Event를 오버라이딩하는 input 컴포넌트를 직접 만든다면 가능합니다.

 

 

우선 Radio Input 컴포넌트를 만들기 전에 컴포넌트 props의 타입을 정의해보도록 하겠습니다.

props 타입인 QuestionTypeButton에 Input 기본 속성을 상속받게 하였고, onChange 속성은 event에 직접 QuestionTypeButtonChangeEvent 타입을 명시하여 오버라이딩되도록 하였습니다.

type QuestionTypeButton = HTMLAttributes<HTMLInputElement> & {
  ...생략
  value: QuestionType;
  onChange: (e: QuestionTypeButtonChangeEvent) => void;
};

 

event의 타입인 QuestionTypeButtonChangeEvent는 다음과 같이 HTMLInputElement ChangeEvent의 타입을 상속받으며, target.value의 타입만 QuestionType으로 지정하여 오버라이딩하도록 하였습니다. 그러면 event.target.value는 string이 아닌 QuestionType으로 명시됩니다!

type QuestionTypeButtonChangeEvent = ChangeEvent<HTMLInputElement> & {
  target: { value: QuestionType };
};

 

그렇게 만든 QuestionTypeButton 컴포넌트는 다음과 같습니다.

export type QuestionTypeButtonChangeEvent = ChangeEvent<HTMLInputElement> & {
  target: { value: QuestionType };
};

type QuestionTypeButton = HTMLAttributes<HTMLInputElement> & {
  ...생략
  value: QuestionType;
  onChange: (e: QuestionTypeButtonChangeEvent) => void;
};

export const QuestionTypeButton = ({
  ...생략
  value,
  onChange,
  ...props
}: QuestionTypeButton) => {
  return (
    <label>
      <input
		...생략
        value={value}
        onChange={onChange}
        {...props}
      />
      {icon} <span>{typeValue[value]}</span>
    </label>
  );
};

 

만든 QuestionTypeButton을 사용해보도록 하겠습니다.

아래와 같이 사용하면 다시 타입 오류를 다시 겪게 되는데요.

<QuestionTypeButton
  ...생략
  index={index}
  value={type}
  onChange={(e) => {
    setQuestionList((prev) => {
      return [
        ...prev.slice(0, index),
        { ...prev[index], type: e.target.value },
        ...prev.slice(index + 1),
      ];
    });
  }}
/>
))}

 

event의 타입을 확인해보니 FormEvent와 같이 지정되어있는 걸 볼 수 있습니다.

 

그러므로 event의 타입을 앞에서 정의한 QuestionTypeButtonChangeEvent로 명시한다면 타입 오류를 해결할 수 있습니다!

onChange={(e: QuestionTypeButtonChangeEvent) => { .... }

 

그렇게 되면 질문 유형 선택 버튼을 클릭시 questionList의 상태 알맞게 업데이트되는 것을 확인할 수 있습니다!