[PeaNutter] TypeScript에서 버튼 클릭 이벤트 타입 에러 해결

문제 상황

Firebase의 GoogleAuthProvider와 GithubAuthProvider를 사용하여 소셜 로그인 기능을 구현하던 중, 하나의 함수에서 버튼의 name 속성에 따라 다른 provider를 호출하도록 구현했다.

<button type="button" name="google" onClick={onClickSocialLogin}>
  Sign up with Google
</button>
<button type="button" name="github" onClick={onClickSocialLogin}>
  Sign up with Github
</button>

const onClickSocialLogin = async (e: React.MouseEvent<HTMLButtonElement>) => {
  const {
    target: { name },
  } = e;
  let provider;
  const auth = getAuth(app);

  if (name === "google") {
    provider = new GoogleAuthProvider();
  }

  if (name === "github") {
    provider = new GithubAuthProvider();
  }

  await signInWithPopup(
    auth,
    provider as GoogleAuthProvider | GithubAuthProvider
  );
};

그런데 이벤트 핸들러 내에서 e.target.name을 참조하려 할 때 EventTarget 형식에 name 속성이 없다는 타입 에러가 발생했다.

 

이전에 onChange 함수에서는 React.ChangeEvent<HTMLInputElement>를 사용하여 문제없이 작동했기에 의아했다.

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { target: { name, value } } = e;  // 타입 에러 발생 X
  // ...
};

 

원인 분석

TypeScript의 엄격한 타입 체킹

타입스크립트는 엄격한 타입 체킹을 통해 코드의 안전성을 보장한다.

특정 속성이 항상 존재한다고 가정하지 않기 때문에, 경우에 따라 그 속성의 존재 여부를 명확히 하기 위한 추가적인 타입 정의가 필요하다.

ChangeEvent와 MouseEvent의 차이

React.ChangeEvent<HTMLInputElement>

입력 요소(input, textarea, select 등)의 내용이 변경될 때 발생하는 이벤트로, 타입스크립트는 이벤트의 target이 HTMLInputElement임을 자동으로 추론한다.

 

React.MouseEvent<HTMLButtonElement>

버튼을 클릭할 때 발생하는 이벤트로, 타입스크립트는 이 target을 일반적인 EventTarget으로 간주한다.

 

EventTarget은 다양한 HTML 요소에서 사용될 수 있고, 요소마다 가지고 있는 속성이 다를 수 있기 때문에 자동 추론할 수 없다.

타입스크립트 입장에서는 name 속성이 있는 요소도 있고 없는 요소도 있기 때문에 name이 존재한다고 장담할 수 없는 것이다.

 

해결 방법

MouseEvent의 target은 여러 요소에서 발생할 수 있고, 모든 요소가 name 속성을 가지고 있지 않기 때문에 명시적인 타입 캐스팅이 필요하다.

 

💡 타입 캐스팅
프로그래밍에서 한 변수나 객체의 데이터 타입을 다른 타입으로 명시적으로 변환하는 과정

 

이벤트 객체의 target을 HTMLButtonElement로 캐스팅하여 name 속성에 접근했다.

// 변경 전
const { target: { name } } = e;

// 변경 후
const button = e.target as HTMLButtonElement;
const name = button.name;

이렇게 하면 타입스크립트가 e.target이 HTMLButtonElement임을 이해하고, name 속성에 안전하게 접근할 수 있게 된다.