[Complex State] useState가 중복되면 {}로 관리한다

성과 이름 2개의 input을 가지고, 입력값을 실시간으로 <h1>태그에 보여주는 App이 있다.

 

물론 아래와 같이 useState를 input마다 할당할 수 있지만, 계속 함수가 중복됨을 볼 수 있다.

import React, { useState } from "react";

function App() {

  const [fName, setfName] = useState("");
  const [lName, setlName] = useState("");

  function handlefNameChange(e) {
    setfName(e.target.value)
  }

  function handlelNameChange(e) {
    setlName(e.target.value)
  }

  return (
    <div className="container">
      <h1>Hello {fName} {lName}</h1>
      <form>
        <input onChange={handlefNameChange} name="fName" placeholder="First Name" value={fName} />
        <input onChange={handlelNameChange} name="lName" placeholder="Last Name" value={lName} />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

 

▼

 

 

하지만 stateListener(onChange속성의 값으로 쓰이는 함수)를 하나로 통합하고 useState에 {}객체를 전달한다면 아래와 같이 간단히 표현할 수 있게 된다.

 

그리고 setter의 인자로 콜백을 전달하면, 그 콜백의 인자는 초기값의 객체를 갖기 때문에 지금 당장 변한 값에 대해서만 업데이트를 하고, 나머지 값은 그대로 보존해주는 역할을 한다.

import React, { useState } from "react";

function App() {

  const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
  });

  function handleNameChange(event) {
    const { name, value } = event.target;

    setFullName((prevValue) => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName
        }
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lName: value
        }
      }
    })

  }

  return (
    <div className="container">
      <h1>Hello {fullName.fName} {fullName.lName}</h1>
      <form>
        <input onChange={handleNameChange} name="fName" placeholder="First Name" value={fullName.fName} />
        <input onChange={handleNameChange} name="lName" placeholder="Last Name" value={fullName.lName} />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;