[React] 함수형 컴포넌트에서의 이벤트 핸들링*

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

함수형 컴포넌트에서 이벤트 핸들링하기

import React, { useState } from "react";

const MyComponent = () => {

  const [form, setForm] = useState({
    username: '',
    message: '',
  });

  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: '',
    })
  }

  return (
    <div>
      <input type="text" name="username" value={username} onChange={onChange}></input>
      <input type="text" name="message" value={message} onChange={onChange}></input>
      <button onClick={onClick}>확인</button>
    </div >
  );
}

export default MyComponent;

 

클래스 컴포넌트와 별 다른 차이는 없다.

그저 state를 생성하고 set하는데 useState를 쓸 뿐이다.

 

여기서 조금 헷갈린 부분이 있다면, ...form과 [e.target.name] : e.target.value이다.

 

ⓐ ...form

불변 데이터 패턴으로 form객체에 대해서 얕은 복사를 실행한다.

Object.assign()과 같다고 한다.

원본(A)이 바뀌어도 복사한 애(B)는 영향을 받지 않는다.

하지만 A의 속성 중 객체를 가리키고 있다면, 말이 또 달라진다.

자세한 것은 다음 블로그를 참고하자.

junwoo45.github.io/2019-09-23-deep_clone/

 

ⓑ [e.target.name] : e.target.value

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

 

결론

함수형 컴포넌트에서 이벤트 핸들링하는 것이라고, 특별히 다를 건 없다.

js 문법은 정말 다양하다. 공부가 필요하다.

 

 

---