[React] 기초 정리 - 여러 개의 input 상태 관리하기

 

input을 여러 개 만들어서 관리하는 방법

useState를 여러 번 사용하고 onChange 함수도 여러 개 만들어서 구현할 수 있다.

하지만 이는 좋은 방법이 아니다.

 

✅ input 태그에 name을 설정하고 이벤트가 input 태그에 name을 설정하고 이벤트가 발생했을 때 name의 값을 참조하면 더 간단하게 구현할 수 있다.

✅ 단, useState에서는 문자열이 아니라 객체형태의 상태를 관리해줘야한다.

 

 

리액트에서 객체를 수정하는 방법

inputs[name] = value;

✅ 위의 코드처럼 값을 직접 수정하면 안 된다.

✅ 기존 값을 직접 수정하게 되면 값을 바꿔도 리렌더링이 진행되지 않는다!

 

🤔 그럼 어떻게 할까? 

✅ 새로운 객체를 만들어서 그 객체에 변화를 주고 이를 상태로 사용해야한다 !

 

setInputs({
	...inputs, 	// 기존 input 객체를 복사한 후 
	[name]: value 	// name 키를 가진 값을 value로 설정
});

 

 

위의 방법을 활용하여 이름과 닉네임을 입력받을 수 있는 input 태그들을 구현해보자.

 

구현하기

// Input.js

import React, { useState } from "react";

export default function Input() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const { name, nickname } = inputs;	// 비구조화 할당을 통해 값을 추출함

  const onChange = (e) => {
    const { value, name } = e.target;	// e.target에서 name과 value의 값을 추출함
    setInputs({
      ...inputs,	// 기존의 input 객체를 복사
      [name]: value,	// name 키를 가진 값을 value로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
  };
  return (
    <div>
      <h2>hello inputs!!!</h2>
      <input
        name="name"
        placeholder="이름을 입력하세요"
        onChange={onChange}
        value={name}
      />
      <br />
      <input
        name="nickname"
        placeholder="닉네임을 입력하세요"
        onChange={onChange}
        value={nickname}
      />
      <br />
      <button onClick={onReset}>초기화</button>

      <div>
        {name}님의 닉네임은 {nickname}입니다.
      </div>
    </div>
  );
}

 

 

실행화면

 

각 name에 해당하는 input 태그에 value가 알맞게 들어가있음을 확인할 수 있다.

 

---

Reference

 

벨로퍼트님의 모던리액트 강의 문서를 보고 작성하였습니다.

 

https://react.vlpt.us/basic/09-multiple-inputs.html

9. 여러개의 input 상태 관리하기 · GitBook