인프런 커뮤니티 질문&답변
작성한 질문수
Typescript 타이핑 질문입니다.
작성
·
145
0
얼마 전에 제로초님 타입스크립트 강좌를 들어서 거기서 배운 걸 이 강좌의 코드에 적용해보고 있습니다.
NodeBird 컴포넌트의 경우 아래처럼 작성했는데요.
const NodeBird: React.FC<{ Component: React.ComponentType }> = ({ Component }) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<title>NodeBird</title>
</Head>
<Component />
</>
)
}
export default NodeBird;강의에 나온 PropTypes를 이용한 코드에서는
NodeBird.propTypes = {
Component: PropTypes.elementType.isRequired
}위와 같이 작성하셨는데, 혹시 타입스크립트에서는 어떤 식으로 작성해야할까요? 타이핑을 해줄 때 Props의 타입에 따로 null을 처리해주지 않은 것만으로도 충분할까요?
그리고 한 가지 질문이 더 있는데요.
LoginForm 코드에서 onChangeId를 타이핑할 때
const onChangeId = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setId(e.target.value);
}, []);위와 같이 진행했는데, React.ChangeEvent가 generic으로 HTMLInputElement를 받는 것이 맞나요? antd의 Input을 넣었더니 e.target.value 에서 에러가 나더라고요.
감사합니다! 저 혹시 e.target과 e.currentTarget이 정확히 어떻게 다른지 알려주실 수 있을까요? 검색해봤을 때 나오는 onclick 이벤트를 이용해서 설명한 예제에서는 e.currentTarget은 click event가 발생한 element를 포함하고 있는 body element를 가리키는 것으로 나오고, e.target은 구체적으로 click event가 발생한 element를 가리키더라고요. Input element의 경우, 특히 위의 경우처럼 value를 처리해야하는 경우에는 e.target.value와 e.currentTarget.value에 어떤 차이가 있나요?