코딩크리처 2024. 6. 27. 09:35

4장 - 이벤트 핸들링


리액트의 이벤트 시스템 - React Typescript Version

  • src/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!

    코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.

  • 일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!

  • 먼저, 작성했던 Say.tsx 파일부터 보겠습니다.

Say.tsx

// (...)
import { useState } from 'react'

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('Hello!');
    const onClickLeave = () => setMessage('Good Bye!');

    const [color, setColor] = useState('black');

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            (...)
        </div>
    );
};
export default Say;

Typescript 예제를 위해, 전부 Type 적용을 해 보겠습니다.

Say.tsx

// (...)
import { useState } from 'react';

// 1.
const Say = () : JSX.Element => {
    // 2.
    const [message, setMessage] = useState<string>('');
    // 3.
    const onClickEnter = () : void => setMessage('Hello!');
    const onClickLeave = () : void => setMessage('Good Bye!');

    const [color, setColor] = useState<string>('black');

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            (...)
        </div>
    )
}
export default Say;
  1. 함수형 컴포넌트 Say를 선언하는 모습입니다.
    리턴 값은 JSX.Element입니다!

  2. useState를 사용하여 참조형 변수 message와 조정형 변수 setMessage를 만드는 과정입니다

    useStatestring 형식의 인터페이스를 넣어 참조 혹은 조정 될 변수가 string 이라는 것을 명시할 수 있습니다

  3. onClickEnter와 같은 함수의 경우, 리턴 값이 없고 실행만 하므로
    () : void의 형식이 됩니다.

예제로 이벤트 핸들링 익히기 - Typescript

앞으로 배울 이벤트 핸들링 예제는 다음과 같습니다 - 책을 참조함

  1. 컴포넌트 생성 및 불러오기
  2. onChange 이벤트 핸들링하기
  3. 임의 메서드 만들기
  4. input 여러 개 다루기
  5. onKeyPress 이벤트 핸들링하기

앞으로 적용할 이벤트 컴포넌트를 봅시다!

EventPractice.tsx

// (...)
import { Component } from 'react';

class EventPractice extends Component {
    render() {
        <div>
            <h1>Event Practice</h1>
            <input
                type="text"
                name="message"
                placeholder="Typing Everything"
                onChange={
                    (e) => {
                        console.log(e);
                    }
                }
            />
        </div>
    }
}
export default EventPractice;
  • onChange 안에 들어간 e변수에 타입이 들어가지 않았습니다.

    이는 Typescript가 onChange안에 들어간 변수이므로,
    React.ChangeEvent<HTMLInputElement>라는 걸 자동으로 인식하였기 때문입니다.

  • 참고로 외울 정도가 되셔야 합니다! 어쩔 수 없습니다.....

  • 현재는 onChange 내부에 있기에 e 변수에 타입이 지정이 되지 않아도 되지만,

    외부에서 onChange 함수를 만들 경우, 위와 같은 긴 타입을 적어야 합니다.


긴 타입 명을 외우는 팁

React.ChangeEvent<HTMLInputElement>를 예로 들어 보겠습니다.

  • React : "리액트 내부에서 일어나는 일"
  • ChangeEvent : "어떠한 변화가 일어난 일이다"
  • <HTMLInputElement> : HTMLinput 에서 일어나는 일이다.

합치면?

리액트 내부에서, input의 변화를 가지고 온 객체이다...!

이런 식으로 이해하시면 좀 더 빨라집니다!

  • 참고로, form에서 변화를 감지하는 객체라면,

    React.ChangeEvent<HTMLFormElement>가 됩니다.

  • 거의 다르지 않지요?