Chapter4_1 - 이벤트 핸들링

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를 만드는 과정입니다
   
   useState에 string 형식의 인터페이스를 넣어 참조 혹은 조정 될 변수가 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> : HTML 의 input 에서 일어나는 일이다.

합치면?

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

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

• 참고로, form에서 변화를 감지하는 객체라면,
  
  React.ChangeEvent<HTMLFormElement>가 됩니다.

• 거의 다르지 않지요?