4장 이벤트 헨들링

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다.

 

학습 범위: p120 ~ p140

 

새로 알게된 사실

 

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

 

2. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다.

 

3. div, input,span 등의 DOM 요소에는 이벤트를  설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없다.

 

4. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다.

 

5. 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용된다.

 

const name = ‘variantKey‘;
const object = {
[name]: ‘value‘
};

{
‘variantKey‘: ‘value‘
} // 결과 값

 

6. useState안에는 객체도 들어갈 수 있다. 

 

import React, { useState } from 'react';
 
const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
  //이 부분이 useState안에 객체를 넣은 코드 
  
  const { username, message } = form;
  const onChange = e => {
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사한 뒤
      [e.target.name]: e.target.value // 원하는 값을 덮어 씌우기
    };

//또 다른 새로 알게된 부분
   
    setForm(nextForm);
  };
  const onClick = () => {
    alert(username + ': ' + message);
    setForm({
      username: '',
      message: ''
    });
  };
  const onKeyPress = e => {
    if (e.key === 'Enter') {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice;