JS 이벤트객체 접근방법

폼전송

❗이벤트 객체
💡그 객체를 가리킨다.
💡e.target 은 그 객체를 가리킨다.
💡e.target.value 은 그 객체의 속성을 가리킨다.
💡e.target.name 은 그 객체의 속성을 가리킨다.

방법1 (간단한 방법)

import React, { useState } from 'react';

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

  // name을 업데이트하는 함수
  const handleNameChange = (event) => {
    setForm({ ...form, name: event.target.value });
  };

  // username을 업데이트하는 함수
  const handleUsernameChange = (event) => {
    setForm({ ...form, username: event.target.value });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Name"
        value={form.name}
        onChange={handleNameChange}
      />
      <input
        type="text"
        placeholder="Username"
        value={form.username}
        onChange={handleUsernameChange}
      />

      <div>
        <p>Name: {form.name}</p>
        <p>Username: {form.username}</p>
      </div>
    </div>
  );
}

export default YourComponent;

방법2 (간단한 방법에서 합치기)

import React, { useState } from 'react';

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

  // name 또는 username을 업데이트하는 함수
  const handleInputChange = (event, field) => {
    setForm({ ...form, [field]: event.target.value });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Name"
        value={form.name}
        onChange={(event) => handleInputChange(event, 'name')}
      />
      <input
        type="text"
        placeholder="Username"
        value={form.username}
        onChange={(event) => handleInputChange(event, 'username')}
      />

      <div>
        <p>Name: {form.name}</p>
        <p>Username: {form.username}</p>
      </div>
    </div>
  );
}

export default YourComponent;

방법3 (이벤트 객체에서 객체비구조화 할당 받기)

❗비구조화 할당 예시

const obj = { a: 1, b: 2 };
const { a, b } = obj;
console.log(a); // 1
console.log(b); // 2

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

  const onChange = (event) => {
    const { name, value } = event.target; // 비구조화 할당
    setForm({
        ...form,
        [name]: [value]  // 연산프로퍼티
    });
  };

  return (
      <div>
          <form onSubmit={onSubmit}>
              <input
                  name="username"
                  placeholder="아이디"
                  value={form.username}
                  onChange={onChange}
              />
              <input
                  name="name"
                  placeholder="이름"
                  value={form.name}
                  onChange={onChange}
              />
              <button type="submit">등록</button>
          </form>
      </div>
  );
}
export default YourComponent;

❗이벤트 객체 비구조화 할당
💡event.target 객체의 name과 value 속성을 추출하여 새로운 변수로 할당
💡event.target.name과 event.target.value를 사용할 필요 없이 name과 value라는 변수를 직접 사용할 수 있게 된다.