React- 여러개의 Input 상태 관리하기

※ 강의를 듣고 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

여러개의 Input 상태 관리

2020/08/29 - [개발 공부한 내용 정리/React] - React- Input 상태 관리하기

React- Input 상태 관리하기

지난 포스트에서 Input 상태를 관리하는 법에 대해서 써보았는데 이번에는 Input이 여러개일때 어떻게 관리하는지 정리해보겠다.

 

InputSample.js

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };


  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

우선 기존에 만든 상태는 지우고 onChange와 onReset함수를 비워둔다.

그리고 input을 하나 더 만든 다음 input이 비워져 있을 때  input에 대한 설명을 하는 placeholder 값을 위 코드와 같이 설정 한다.

 

import React, { useState } from 'react';

function InputSample() {
  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>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

input 의 개수가 여러개가 됐을때는, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수도 있다. 하지만 그 방법은 가장 좋은 방법이 아니다.

더 좋은 방법은, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.

 

리액트 상태에서 객체를 수정해야 할 때에는

inputs[name] = value;

이런식으로 직접 수정하면 안되고 아래와 같이

setInputs({
  ...inputs,
  [name]: value
});

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

 

실행 결과