리액트 이벤트

제네릭(Generics)

: 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이 있음. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용됨.
타입을 마치 함수의 파라미터처럼 사용하는 것, 타입을 넘겨 타입을 받겠다. (원하는 타입을 넘겨서 그대로 받겠다)

function getText(text) {
  return text;
}

위 함수는 text 라는 파라미터에 값을 넘겨 받아 text를 반환해 줌.

getText('hi'); // 'hi'
getText(10); // 10
getText(true); // true

hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환함.

function getText<T>(text: T): T {
  return text;
}

⬆️ 위 함수는 제네릭 기본 문법이 적용된 형태로, 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있음.

getText<string>('hi');
getText<number>(10);
getText<boolean>(true);

EX)

interface Person {
    name: string;
    age:number;
}

interface Developer{
    name: string;
    age: string;
}

interface Admin{
    name: string;
    age: boolean;
}

const josh:Developer={
    name:'josh',
    age:'100'
}

age 의 타입이 변경될 때마다 계속 다른 타입을 정의 해 나가야 하는 번거로움이 발생함.

⬇️

// interface Person {
//     name: string;
//     age:number;
// }

// interface Developer{
//     name: string;
//     age: string;
// }

// interface Admin{
//     name: string;
//     age: boolean;
// }

interface Anyone<T> {
  name: string;
  age: T;
}

const josh: Anyone<boolean> = {
  name: "josh",
  age: false,
};

제네릭의 사용으로 더 효율적으로 코드를 사용할 수 있음.

리액트 인풋 이벤트 핸들러 코드

import {ChangeEvent, MouseEvent, useState} from 'react';


function ButtonHandler(){
   function showAlert(event:MouseEvent){ //onClick이벤트에 대한 핸들러 showAlert를 정의함.
    console.log(event); //event 객체를 콘솔에 출력함.
   }

return <button onClick={showAlert}>show</button>;
};

function InputHandler(){
    const [todo, setTodo]=useState<string>(''); //string은 굳이 안 넣어도 됨. 
    function updateTodo(event: ChangeEvent<HTMLInputElement>){
        setTodo(event.target.value);
    }
    return <input type='text' value={todo} onChange={updateTodo}/>; //ChangeEvent를 통해 onchange의 이벤트 핸들러의 파라미터를 정의할 수 있음.
}

export {ButtonHandler, InputHandler};

const [todo, setTodo]=useState(''); 에서 이 없어도 되는 이유는 타입스크립트의 타입추론 기능 때문임.

• 변수가 어떤 타입인지 명시적으로 지정하지 않아도, 할당된 값을 보고 타입을 자동으로 추론할 수 있음
• 이 코드에서 useState에 빈 문자열('')을 초기값으로 전달했기 때문에 todo의 타입은 자동으로 string으로 지정됨