[React] input태그 상태 관리

input 태그 상태 관리하기

inputSample.js 생성

import React from 'react';

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;

App.js 에서 렌더링

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

useState를 활용해서 input 객체 상태 관리

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {  // 이벤트객체 e를 받아온다.
    setText(e.target.value); // e.target은 이벤트가 발생한 DOM객체
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

• input의 onChange 이벤트에서 이벤트 객체 e를 파라미터로 받아와서 사용한다.
• 이 객체의 e.target은 이벤트가 발생한 DOM을 가리키게 되어서 해당 value값을 조회해서 입력값을 조회할 수 있다.

여러개의 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;

input이 이름과 닉네임 2개로, 여러개인 경우가 되었습니다.

단순히 useState를 여러개 사용하고, onChange도 여러개 만들어서 구현이 가능하지만, 개수가 많을 경우 효율적이지 못합니다.

input에 name값을 설정하고, 이벤트가 발생했을때, name값을 참조해서 상태를 관리

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객체에 name값 설정
• useState에 설정한 name값을 key로, value로 initial값 설정
• 리턴받은 useState 객체를 비구조화 할당을 통해 값 추출
• 이벤트 발생시 리액트 불변성을 지키기 위해서 전개연산자를 통해 객체를 복사한뒤 값을 설정

---

참고

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