React) 4장 이벤트 핸들링

이벤트 핸들링 이란?

사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 이벤트라고 함

 

리액트의 이벤트 시스템

리액트의 이벤트 시스템은 HTML 이벤트와 동일하기에 사용법이 비슷하다.

 

 

onChange 이벤트 햄들링하기

-설정-

<input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />

1️⃣ e객체는 syntheticEvent로 웹브라우저의 이벤트를 감싸는 객체이다.

2️⃣ 네이티브 이벤트와 인터페이스가 같으므로 순수JS에서 HTML이벤트와 같이 사용가능하다.

3️⃣ syntheticEvent는 네이티브 이벤트와는 달리 이벤트가 끝나면 이벤트가 초기화되어 정보참조 불가능하다.

4️⃣ 비동기적으로 이벤트 객체 참조시 .persist() 함수를 호출하여 사용한다.(버전 17 부터는 폴링 안된다.)

 

 

state에 input값 담기

const onChangeMessage = e => setMessage(e.target.value);

//e.target.name을 사용하려면 useState를 사용하는 상태에서 객체를 사용하면 된다.
//인풋의 갯수가 많아질 수록 e.target.name을 사용하는 것이 좋다.
const onChange = e => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value
    };
    setForm(nextForm);
  };

 

버튼을 누를때 component 값을 공백으로 설정

  const onClick = () => {
    alert(`${username} : ${message}`);
    setMessage(``);
    setUsername(``);
  };
  
  //e.target.name을 사용할 경우
    const onClick = () => {
    alert(`${username} : ${message}`);
    setForm({
      username: ``,
      message: ``,
    });
  };

 

임의 메서드 만들기

이벤트에 실행할 JS코드를 전달하는 것이 아니라 함수 형태의 값으로 전달한다

이벤트 처리시 렌더링은 시작할 때 함수를 만들어 전달하기보다는

함수를 미리 준비하여 전달하는 것이 가독성이 더 좋다.(상황에 맞게 사용하는 것이 좋다)

 

기본방식으로 메서드 생성

기본방식은 메서드 선언하고 constructor함수에서 bind 작업을 한다.

함수 호출시 this는 호출부에 따라 결정되며 클래스의 임의 메서드가 특정 HTML태그 이벤트로

등록하는 과정에 메서서드와 this관계가 끊긴다. ➡임의 메서드가 등록 되었어도 this를 컴포넌트 자신으로 가르키기 위해 메서드를 this와 바인딩 하는 작업이 필요함.(constructor 함수에서 가능하다.)

 

Property Initializer syntax를 사용한 메서드 작성

메서드 바인딩은 사용자 메서드에서 하는 것이 정석이지만, 새 메서드를 만들때 마다 constructor도 수정해야 한다.

이때, 바벨의 transform-class-properties 문법을 사용하면 화살표 함수 형태로 메서드를 정의할 수 있다.

  handleChange(e) {
    this.setState({
      message: e.target.value
    });
  }

  handleClick() {
    alert(this.state.message);
    this.setState({
      message: '',
    });
  }

 

 

input 여러개 다루기

메서드를 여러개 생성하는 것도 해법이지만

event객체를 활용하는 것이 좋다.

e.target.name은 해당 이벤트 발생 태그의 name값을 의미

(객체안에 key를 []로 감싸면 그 안의 레퍼런스가 가르키는 값이 key로 사용된다)

//클래스 형
handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value, 
      //객체 안에서 key를 []로 감싸면 레퍼런스가 가리키는 실제 값이 key 값으로 사용됨
    });
  }
  
//함수 형
  const onChange = e => {
    const nextForm = {
      ...form,
      [e.target.name]: e.target.value
    };
    setForm(nextForm);
  };

 

 

onKeyPress 이벤트 핸들링

키를 눌렀을 때 발생하는 keyPress 이벤트 처리 방법

class형
  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.handleClick();
    }
  }
  
  
함수형
  const onKeyPress = e => {
    if (e.key === `Enter`) {
      onClick();
    }
  };