React) 여러 개의 input 상태 관리하기

매번 복습하는데 까먹어서 정리하려고 한다!

react-hook-form 라이브러리에 익숙해져서 useState 로 input 여러개를 기본적으로 관리하는 걸 까먹는것 같다 ㅠㅠ

0. input 여러 개일 때 상태관리하기

아래의 예제는 벨로퍼트에서 가져왔다.

import React, { useState } from "react";

function InputSample() {
  const [inp, setInp] = useState({
    realName: "",
    nickName: "",
  });

  const { realName, nickName } = inp;

  //onChange 하나의 이벤트 핸들러로 2개의 input 값 제어
  const onChange = (e) => {
    const { value, name } = e.target;
    console.log(e.target);
    setInp({ ...inp, [name]: value }); // 기존의 inp 객체를 복사한 뒤 name키를 가진 값을 value로 설정
    // ex: realName 키의 값은 e.target.value로
  };


  const onReset = () => {
    setInp({
      name: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input
        type="text"
        name="realName"
        placeholder="이름"
        value={realName}
        onChange={onChange}
      />
      <input
        type="text"
        name="nickName"
        placeholder="닉네임"
        value={nickName}
        onChange={onChange}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값:</b>
        {inp.name}({inp.nickName})
      </div>
    </div>
  );
}
export default InputSample;

 

 

내가 항상 까먹는 부분은 아래 부분

  //onChange 하나의 이벤트 핸들러로 2개의 input 값 제어
  const onChange = (e) => {
    const { value, name } = e.target;
    console.log(e.target);
    setInp({ ...inp, [name]: value }); // 기존의 inp 객체를 복사한 뒤 name키를 가진 값을 value로 설정
    // ex: realName 키의 값은 e.target.value로
  };

첫번째 input 창에 값을 넣어보면 console.log(e.target) 에 아래처럼 나온다.

 

두번째 input 창에 값을 넣어보면 console.log(e.target)에 아래처럼 나온다.

 

const {value,name} = e.target 은

name 속성과 value 속성만 e.target 에 넣겠다는 것

 

결국 객체 구조분해 할당을 안하고 아래처럼 해도 된다는 말이다. 

prevInp 을 파라미터로 이전 오브젝트 데이터를 복사해오고, 그 외에 새로운 값을 추가/ 변경해서 덮어 씌운다.

const onChange = (e) => {
  console.log(e.target.name);
  setInp((prevInp) => ({
    ...prevInp,
    [e.target.name]: e.target.value,
  }));
};

 

그런데, 이부분은 뭘까?

 

🔸계산된 속성명 [ ]

 [name]: value

[] 로 속성이름을 감싸면 속성이름을 동적으로 만들 수 있다. 

[] 안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있다.

저기 위 예제에서는 name 변수를 넣었으니 name 변수가 realName 일 때, nickName 일때 둘다 사용할 수 있다는 얘기이다. 

 

계산된 속성명 예제 코드

const dynamicKey = "name";
const value = "John";

const obj = {
  [dynamicKey]: value,
};

console.log(obj); // { name: "John" }

위의 코드에서 dynamicKey는 동적으로 변하는 변수이며, "name"을 할당했습니다. value는 "John"이라는 문자열을 할당했습니다.

obj 객체를 생성할 때 [dynamicKey]: value와 같이 계산된 속성명 문법을 사용했습니다. 이렇게 하면 dynamicKey 변수의 값인 "name"이 obj 객체의 속성명으로 사용되고, 해당 속성에 value 값인 "John"이 할당됩니다.

결과적으로, console.log(obj)를 실행하면 { name: "John" }이 출력됩니다. 이는 obj 객체의 속성명으로 "name"을 가지고 있고, 해당 속성에는 값으로 "John"이 할당되었음을 나타냅니다.

이처럼 계산된 속성명을 사용하면 변수 또는 표현식을 활용하여 동적으로 객체의 속성명을 결정할 수 있습니다.

 

---

https://jaddong.tistory.com/entry/useState-object-%ED%98%95%ED%83%9C-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%ED%95%98%EA%B8%B0

useState object 형태 업데이트하기