[React] INPUT 관리하기.

React에서 사용자가 데이터를 입력할 수 있는 INPUT을 관리하는 방법에 대해서 알아보자.

 

useState를 이용해서 input 하나를 관리를 해보고, 여러개를 관리해본다.

 

1. INPUT 1개 관리하기

input 태그의 onChange와 useState의 Set 함수를 연결하여 관리한다.

 

onChange는 이벤트 중 하나로, 변화가 있을 때 마다 실행된다.

 

그러기에, INPUT의 변화가 있을 때 마다 즉 사용자가 INPUT에 입력 할 때 마다 그 값을 text에 저장한다.

import { useState } from 'react'

export default function App() {
  const [text, setText] = useState() // text 상태 관리
  
  const onChange = (event) => setText(event.target.value) // 변화가 일어날 때 마다, 이벤트 대상의 값을 text에 저장
  
  const onReset = () => setText('') // text 초기화
  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>RESET</button>
      <h1>{text}</h1>
    </div>
  )
}

 

 

2. INPUT 여러개 관리하기.

INPUT을 여러개로 관리 할 때는 여러개의 useState를 사용해도 되지만, 한 개의 useState를 객체로 관리해서 한 번에 관리 할 수 있다.

이렇게 관리를 하게 되면, onChage를 발생 시킬 때, input의 value만이 아닌 name도 추출해 key, value로 객체에 저장한다.

import { useState } from 'react'

export default function App() {
  // 한 개의 상태지만 객체를 이용해 하나로 관리
  const [user, setUser] = useState({
    name: '',
    age: 0,
  })

  const { name, age } = user // name, age를 비구조화 할당으로 선언
  
  // 어떤 이벤트에 연결되어있는 지를 추출하여 상태 관리
  const onChange = (event) => {
    const { value, name } = event.target // 이벤트 대상의 값 뿐만 아닌 name도 추출
    // 이벤트 name과 value로 매칭해 객체 관리
    setUser({
      ...user,
      [name]: value,
    })
  }

  const onReset = () => {
    setUser({
      name: '',
      age: '',
    })
  }
  return (
    <div>
      <input name="name" type="text" onChange={onChange} value={name} />
      <input name="age" type="number" onChange={onChange} value={age} />
      <button onClick={onReset}>RESET</button>
      <h1>이름 : {name}</h1>
      <h1>나이 : {age}</h1>
    </div>
  )
}