변수 구조분해할당

let val1 = 1 ,val2 = 'val2';
let obj = {
    [val1] : 1,
    [val2] : 2,
    3 : 3
}
obj //  {1: 1, 3: 3, val2: 2}

obj의 key값을 변수로 선언하여 사용하고 싶다면 []를 붙인다.
안그러면 val1 혹은 val2 문자열 자체가 key값으로 선언된다.

import React, { useState, useCallback } from "react";

const App = () => {
  // Login.jsx

  // state
  const [text, setText] = useState({
    email: "",
    password: "",
  });

  // func
  const onChange = useCallback(
    (e) => {
      const { value, id } = e.target;
      setText({ ...text, id: value });
    },
    [text]
  );

  return (
    <>
      <input id="email" value={text.email} onChange={onChange} />
      <input id="password" value={text.password} onChange={onChange} />
    </>
  );
};

export default App;

이렇게하면 e.targer으로 받아온 id를 setText의 key값으로 id가 인식하지못한다.

import React, { useState, useCallback } from "react";

const App = () => {
  // Login.jsx

  // state
  const [text, setText] = useState({
    email: "",
    password: "",
  });

  // func
  const onChange = useCallback(
    (e) => {
      const { value, id } = e.target;
      console.log(value, id);
      setText({ ...text, [id]: value });
    },
    [text]
  );

  return (
    <>
      <input id="email" value={text.email} onChange={onChange} />
      <input id="password" value={text.password} onChange={onChange} />
    </>
  );
};

export default App;

이를 [id]로 묶어줘야 id로 인식할 수 있다.