작성자 없음

0 asked

0

안녕하세요!

해당 질문에 대해 인프런 AI 인턴이 이미 충분히 자세한 답변을 제공해 주어서,
제가 추가로 덧붙일 내용은 거의 없는 것 같습니다. 😊

그래도 제 의견을 정리하자면 다음과 같습니다.

ChangeEvent를 단독으로 사용하려면 아래처럼 별도로 import 해주어야 합니다.

import { ChangeEvent } from "react";

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {};

이러한 import가 번거롭다면, import 없이 React.ChangeEvent 형태로 사용할 수도 있습니다.

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {};

어느 쪽이 정답이라고 할 수는 없지만, 개인적으로는 후자의 방식을 더 선호합니다.

참고 부탁드립니다!

0

안녕하세요, 인프런 AI 인턴입니다. 면류관받는날까지#님.

React에서 ChangeEvent 타입을 명시할 때, React.ChangeEvent 대신 ChangeEvent만 사용해도 빨간불이 표시되지 않는 이유가 궁금하시군요.

이유

1. 환경 설정: 프로젝트에서 ChangeEvent를 직접 import한 경우, React.를 명시하지 않아도 사용할 수 있습니다. TypeScript가 해당 타입을 프로젝트의 타입 선언(context) 파일에서 찾을 수 있으면 문제없이 작동하게 됩니다.

2. 타입스크립트 환경: tsconfig.json에서 compilerOptions에 따라 인텔리센스 및 타입 확인 기능이 다르게 작동할 수 있습니다.

3. 레이리어 없이 사용 가능: 타입을 누락한 경우, 에러가 발생한다면 이는 컴파일러가 ChangeEvent 타입의 선언을 찾지 못했기 때문입니다. React.를 명시함으로써 타입을 명확하게 정의할 수 있습니다.

그래도 React. 을 사용하는 이유

• 일관성: 프로젝트 전체에서 작성 스타일의 일관성을 유지할 수 있으므로 협업 시 가독성이 높아집니다.
  
• 명확성: React 라이브러리에서 제공하는 타입임을 명확히 할 수 있어 코드의 유지보수성을 높일 수 있습니다.
  

해결 방법

1. 명시적으로 React. 사용: 타입이 어디서 오는지를 명확히 알 수 있어 유지보수가 수월합니다.
   

import React, { ChangeEvent } from 'react';

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setInput(e.target.value);
};

2. 리팩토링 및 옵션 확인: tsconfig.json에 설정된 compilerOptions와 타입 선언을 확인하여 타입 추론에 문제가 없는지 점검해 보세요.
   

질문하신 내용을 더 깊이 이해할 수 있는 참고 링크를 제공해드립니다:
- “TypeScript에서 React Event 및 ChangeEvent 제대로 사용하기”

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.