[React] input 상태 관리하기

input 상태 관리하기

 

• input의 onChange를 사용하면 이벤트 객체 e를 파라미터로 받아올 수 있다.
• 이 객체의 e.target은 이벤트가 발생한 DOM을 가리킨다.
• e.target.value를 조회하면 현재 input의 value값을 알 수 있다.

 

먼저, InputSample.js파일에 InputSample컴포넌트를 생성합니다.

// InputSample.js
import React, {useState} from 'react';

function InputSample() {
  const [text, setText] = useState('');
  const onChange = (e) => {
    setText(e.target.value); // 입력하는 값이 하단 값에 나타나게 함
  };

  const onReset = () => {
    setText('');
  }
  return (
    <>
      <input onChange={onChange} value={text}/>{/* input값을 text로 설정 */}
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b> {/* input에 입력한 text값을 불러옴 */}
      </div>
    </>
  );
}

export default InputSample;

 

그다음,  InputSample.js 컴포넌트를 App.js 에서 렌더링합니다.

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

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

export default App;

 

 

 

 

여러개의 Input 상태 관리하기

 

InputSample.js 파일을 이렇게 수정해 줍니다.

// InputSample.js
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 (
    <>
      <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>
    </>
  );
}

export default InputSample;

 

• ... 은 spread 문법으로 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사한다.
• 리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다.