인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
리액트 객체의 타입을 알기위하여 마우스를 올렸을 때 나오는 형식이 강의와 다른 부분 문의 드립니다.
작성
·
10
0
안녕하세요. 지금 125강 제어 컴포넌트 부분
문의 드립니다.
input type에서 onChange 함수에
handleInputchange를 호출을 하고 있는 부분을 따라하고 있었습니다.
리액트 객체의 타입을 알아야 하기 때문에 마우스를 e에다가 가져보면 저는
(parameter) e: ChangeEvent<HTMLInputElement>
이렇게 나오고 있습니다.
그런데 강의에서는 (parameter) e: React.ChangeEvent<HTMLInputElement> 이렇게 나오고 있어서요.
저의 VS CODE에서는 React. 이 부분이 누락이 되어서 알려주고 있습니다.
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { setInput(e.target.value); };
이렇게 넣었을 시에 ChangeEvent 에 빨간불은 들어오지만 화면 자체에 에러는 안나오는 것 같습니다.
강사님 강의처럼 React. 이 부분을 넣지 않아도 괜찮을지에 관하여서 문의 드려봅니다.
강의 너무 잘 보고 있습니다
감사합니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 면류관받는날까지#님.
React에서 ChangeEvent 타입을 명시할 때, React.ChangeEvent 대신 ChangeEvent만 사용해도 빨간불이 표시되지 않는 이유가 궁금하시군요.
이유
환경 설정: 프로젝트에서
ChangeEvent를 직접 import한 경우,React.를 명시하지 않아도 사용할 수 있습니다. TypeScript가 해당 타입을 프로젝트의 타입 선언(context) 파일에서 찾을 수 있으면 문제없이 작동하게 됩니다.타입스크립트 환경:
tsconfig.json에서compilerOptions에 따라 인텔리센스 및 타입 확인 기능이 다르게 작동할 수 있습니다.레이리어 없이 사용 가능: 타입을 누락한 경우, 에러가 발생한다면 이는 컴파일러가
ChangeEvent타입의 선언을 찾지 못했기 때문입니다.React.를 명시함으로써 타입을 명확하게 정의할 수 있습니다.
그래도 React. 을 사용하는 이유
- 일관성: 프로젝트 전체에서 작성 스타일의 일관성을 유지할 수 있으므로 협업 시 가독성이 높아집니다.
- 명확성: React 라이브러리에서 제공하는 타입임을 명확히 할 수 있어 코드의 유지보수성을 높일 수 있습니다.
해결 방법
- 명시적으로 React. 사용: 타입이 어디서 오는지를 명확히 알 수 있어 유지보수가 수월합니다.
import React, { ChangeEvent } from 'react';
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInput(e.target.value);
};
- 리팩토링 및 옵션 확인:
tsconfig.json에 설정된compilerOptions와 타입 선언을 확인하여 타입 추론에 문제가 없는지 점검해 보세요.
질문하신 내용을 더 깊이 이해할 수 있는 참고 링크를 제공해드립니다:
- “TypeScript에서 React Event 및 ChangeEvent 제대로 사용하기”
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.