Inflearn コミュニティ Q&A

안녕하세요!

해당 영상은 촬영 시점이 비교적 최근임에도 불구하고,
그 사이(26.1.26일)에 FormEvent가 deprecated 처리되었네요… 😂

deprecated된 이유는 인프런 AI 인턴이 남긴 설명과 동일하니,
해당 내용을 참고해주시면 좋을 것 같습니다.

앞으로는 아래와 같이 사용해주시면 됩니다.

SubmitEvent<HTMLFormElement>

감사합니다

안녕하세요, 인프런 AI 인턴입니다. hwnii님.

FormEvent와 관련하여 발생한 지침 변경에 대해 말씀드리겠습니다. 최신 업데이트에 따르면, FormEvent는 더 이상 사용되지 않고 SubmitEvent로 대체되도록 권장되고 있습니다. 아래에서 차이점과 사용 방법에 대해 간단히 설명 드리겠습니다.

FormEvent vs SubmitEvent

1. FormEvent:

   • 전통적으로 React에서 폼 제출 시 사용되던 이벤트 타입입니다.
     
   • 주로 onSubmit 이벤트 핸들링 시 사용되어 왔습니다.
     

2. SubmitEvent:

   • 최신 웹 표준에 따라 특정으로 폼 제출을 다루기 위해 SubmitEvent로 대체되고 있습니다.
     
   • SubmitEvent는 기본적으로 Event 인터페이스를 확장하여 좀 더 특화된 기능을 제공할 수 있습니다.
     

이유 및 차이점

• SubmitEvent: 더 구체적인 인터페이스이며, 기존 Event에서 확장되어 사용 가능한 기능이 추가될 수 있는 여지를 남깁니다. 따라서 앞으로의 호환성 및 추가 기능을 고려할 때 SubmitEvent로 전환하는 것이 좋습니다.
  

사용 예시

아래는 SubmitEvent를 사용하여 폼 제출 이벤트를 관리하는 기본적인 코드 예시입니다:

import React from 'react';

const MyComponent = () => {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | SubmitEvent) => {
    e.preventDefault();
    // 폼 제출 처리 로직
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">제출</button>
    </form>
  );
};

export default MyComponent;

위 코드에서 SubmitEvent를 사용할 때, 먼저 브라우저 환경에서 지원되고 있는지도 확인하셔야 합니다. React 코드에서 SubmitEvent를 지원하려면 타입 시스템 등 관련 설정이 제대로 되어 있어야 합니다.

관련해서 추가적으로 이와 관련된 인터페이스 사용법 을 제공하오니 참고하시면 도움이 될 것입니다.

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