react input 관리

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

const Test = () => {
  const [name, setName] = useState("an");
  const [nickname, setNickname] = useState("jakdu");

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({
      name,
      nickname,
    });
  });
  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };
  return (
    <div>
      <p>{name}</p>
      <p>{nickname}</p>
      <input placeholder={name} onChange={onChangeName} />
      <input placeholder={nickname} onChange={onChangeNickname} />
    </div>
  );
};

export default Test;

이코드를

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

const Test = () => {
  const [name, setName] = useState("an");
  const [nickname, setNickname] = useState("jakdu");

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({
      name,
      nickname,
    });
  });

  return (
    <div>
      <p>{name}</p>
      <p>{nickname}</p>
      <input placeholder={name} {...setName} />
      <input placeholder={nickname} {...setNickname} />
    </div>
  );
};

export default Test;

이렇게 바꾸게 되면

input 에 입력한것이
{name} , {nickname} 에 변하지 않습니다.

이전코드에서는

const onChangeName = (e) => {
    setName(e.target.value);
  };
<p>{name}</p>
<input placeholder={name} onChange={onChangeName} />

로 인해서
onChange 가 바뀔때마다 함수 onChangeName 이 호출되엇 인자값으로 전달되고 e 파라미터 받으면 setName 으로 인해 value 값이 변하지만
2분째 코드에서는 그런한 처리가 없기 때문이다 .