TypeScript를 사용하여 React에서 사용자 이벤트 관리
이 튜토리얼은 사용자의 동작에 대해 컴포넌트에서 컴포넌트로 onClick 함수를 전달하여 TypeScript를 사용하여 React에서 사용자 이벤트를 관리하는 방법을 보여줍니다.
TypeScript를 사용하여 React에서 사용자 이벤트 관리
새로운 React 프로젝트를 빠르게 시작하고 실행하기 위해 create-react-app를 사용할 것입니다.
npx create-react-app my-app --template typescript
cd my-app
npm run start
필요한 패키지를 설치하고 개발 서버를 시작한 후 src/App.tsx로 이동하여 모든 상용구 코드를 삭제하고 빈 구성 요소를 남겨둡니다.
import React from "react";
function Message() {
return <div></div>;
}
export default Message;
이제 사용자가 클릭할 수 있는 버튼을 div에 추가하고 onClick 소품 내부에 경고가 포함된 함수를 전달하여 응답합니다.
function Message() {
return (
<div>
<button
onClick={() => {
alert("I was clicked!");
}}>
Click Me!
</button>
</div>
);
}
Vanilla React에서 TypeScript로 변경되는 사항은 없지만 onClick 함수가 Message 구성 요소의 소품으로 전달되기를 원하면 상황이 달라집니다. 이를 표시하기 위해 Message를 자식으로 포함하는 Game이라는 또 다른 구성 요소를 만듭니다.
function Game() {
return (
<div>
<Message></Message>
</div>
);
}
export default Game;
그리고 Message는 onClick 기능을 수신하고 text는 Game에서 가져온 소품으로 만들 것입니다.
function Message({onClick, text}) {
return (
<div>
<button onClick={onClick}>{text}</button>
</div>
);
}
function Game() {
return (
<div>
<Message
onClick={() => {
alert("I was clicked!");
}}
text="Click me!"></Message>
</div>
);
}
그러나 이 코드를 실행하면 다음과 같은 컴파일 오류가 발생합니다.
Binding element 'onClick' implicitly has an 'any' type.
Binding element 'text' implicitly has an 'any' type.
Vanilla JavaScript에서는 오류가 발생하지 않지만 TypeScript는 Message의 onClick 및 text props가 암시적으로 any 유형을 가지고 있기 때문에 오류를 발생시킵니다. 가게. 이 문제를 해결하기 위해 Message의 소품이 어떤 유형을 지정해야 하는지 지정하는 인터페이스를 만들어야 합니다.
interface MessageProps {
text: string;
onClick: {};
}
text prop이 가져야 하는 값은 단지 문자열이기 때문에 선언하기 쉽습니다. 그러나 onClick의 가치는 더 어렵습니다.
onClick은 event 속성을 가지고 있기 때문에 일반 함수 이상이며, button 요소의 미리 정해진 속성입니다. 따라서 onClick을 정의하려면 React와 함께 제공되는 사전 정의된 인터페이스가 필요합니다. 이 경우 ButtonHTMLAttributes라고 하며 button 요소의 모든 속성 유형을 보유합니다.
그것을 사용하려면 ButtonHTMLAttributes 유형을 저장하기 위해 MessageProps 인터페이스를 확장해야 합니다.
interface MessageProps extends ButtonHTMLAttributes {
text: string;
}
그러나 이것으로는 충분하지 않으며 ButtonHTMLAttributes 인터페이스가 Generic Type이므로 이와 같은 코드를 실행하면 오류가 발생합니다. Generic Type은 변수가 있는 인터페이스라고 생각할 수 있으며, 이를 사용하기 위해 인터페이스를 선언한 후 <>로 감쌉니다.
이 경우 ButtonHTMLAttributes 인터페이스는 우리가 사용하는 HTML 요소를 알기 위한 변수가 필요하며 이는 전역 HTMLButtonElement가 됩니다.
interface MessageProps extends ButtonHTMLAttributes<HTMLButtonElement> {
text: string;
}
MessageProps는 text 및 onClick props에 대한 유형뿐만 아니라 button 요소의 모든 props에 대한 유형을 보유합니다. 버튼의 모든 소품을 메시지에 추가할 수 있습니다.
onClick 소품만 확장하려는 경우 인터페이스를 확장하지 않고 새 onClick 유형을 만들고 Indexed Access Types를 사용하여 ButtonHTMLAttributes의 onClick 속성을 할당합니다.
interface MessageProps {
text: string;
onClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
}
완료하려면 Message 구성 요소가 다음과 같은 방식으로 props에 MessageProps를 사용하도록 선언해야 합니다.
function Message({onClick, text}: MessageProps) {
return (
<div>
<button onClick={onClick}>{text}</button>
</div>
);
}
그리고 원하는 경우 반환 유형에 JSX.Element로 주석을 달 수 있으므로 실수로 다른 유형을 반환하면 TypeScript에서 오류가 발생합니다.
function Message({onClick, text}: MessageProps): JSX.Element {
return (
<div>
<button onClick={onClick}>{text}</button>
</div>
);
}
그리고 이것이 최종 결과일 것입니다.
import React from "react";
import {ButtonHTMLAttributes} from "react";
interface MessageProps {
text: string;
onClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
}
function Message({onClick, text}: MessageProps): JSX.Element {
return (
<div>
<button onClick={onClick}>{text}</button>
</div>
);
}
function Game() {
return (
<div>
<Message
onClick={() => {
alert("I was clicked!");
}}
text="Click me!"></Message>
</div>
);
}
export default Game;
Juan Diego Rodríguez (also known as Monknow) is a front-end developer from Venezuela who loves to stay updated with the latest web development trends, making beautiful websites with modern technologies. But also enjoys old-school development and likes building layouts with vanilla HTML and CSS to relax.
LinkedIn