[React] input 상태 관리

input 상태관리

<input 컴포넌트 생성>

import React from 'react';
function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}
export default InputSample;

<App 컨포넌트에서 렌더링>

import React from 'react';
import InputSample from './InputSample';
function App() {
  return (
    <InputSample />
  );
}
export default App;

**input의 입력값, 값에 표기 그리고 초기화 버튼 클릭시 input 값이 비워지도록 구현

< useState, onChange이벤트, e.target >사용

import React, { useState } from 'react';
function InputSample() {
  const [text, setText] = useState('');
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onReset = () => {
    setText('');
  };
  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}
export default InputSample;

: input의 상태를 관리할때는 input 태그의 value 값도 설정해주는 것이 중요함

여러개 input 상태관리

<input에 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;

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

inputs[name] = value;

이런식으로 직접 수정하면 안된다.
꼭 새로운 객체를 만들어서 새로운 객체에 변화를 주고 이를 상태로 이용해야한다
<spread 문법사용, 새로운 객체사용>

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