[React] state, 이벤트핸들러 통합하기

 

공통되는 state를 하나로 합치기

 

1. useState를 input 값의 항목을 담은 객체로 수정

2. 이벤트 핸들러를 setInput으로 수정

  - 스프레드 연산자 활용하여 수정하려는 값 외의 나머지 값은 그대로 유지하도록 하기

3. return 값의 value 값을 input.name / input.country 등으로 수정

 

 

import { useState } from "react"

const Register = () => {

  const [input,setInput] = useState({
    name : "",
    birth: "",
    country : "",
    bio : "",
  })

  console.log(input)

  const onChangeName = (e) => {
    setInput({
      // name 외의 나머지 값은 유지되도록 스프레드 연산자 사용
      ...input,
      name:e.target.value
    })
  }

  const onChangeBirth = (e) => {
    setInput({
      ...input,
      birth:e.target.value
    })
  }

  const onChangeCountry = (e) => {
    setInput({
      ...input,
      country:e.target.value
    })
  }

  const onChangeBio = (e) => {
    setInput({
      ...input,
      bio:e.target.value
    })
  }

  return (
    <div>
      <div>
        <input value = {input.name}
        onChange={onChangeName} 
        placeholder={"이름"} />
      </div>
      <div>
        <input 
        value = {input.birth}
        onChange={onChangeBirth}
        type="date" 
        />
      </div> 
      <div>
        <select onChange={onChangeCountry} value={input.country}>
          {/* 맨 위에 있는 값이 초기값 */}
          <option></option>  
          <option value="kr">한국</option>
          <option>영국</option>
          <option>미국</option>
        </select>
      </div>
      <div>
        <textarea 
        onChange={onChangeBio}
        value = {input.bio}></textarea>
      </div>
    </div>
  )
}


export default Register

 

 

 

이벤트 핸들러도 통합하기

 

1. onChange라는 새로운 이벤트 핸들러 만들고 나머지는 싹 다 지우기

2. 각 input에 name 속성 부여하기

•  [e.target.name]에 들어있는 값 :
  •  대괄호로 작성하면 프로퍼티의 key로서 설정이 됨.
  •  즉, 이벤트가 발생한 태그의 name 속성에 설정된 값이 들어 있음

import { useState } from "react"

const Register = () => {

  const [input,setInput] = useState({
    name : "",
    birth: "",
    country : "",
    bio : "",
  })

  console.log(input)

  const onChange = (e) => {
    setInput({
      ...input,
      [e.target.name] : e.target.value
    })
  }

  return (
    <div>
      <div>
        <input 
        name = "name"
        value = {input.name}
        onChange={onChange} 
        placeholder={"이름"} />
      </div>
      <div>
        <input 
        name = "birth"
        value = {input.birth}
        onChange={onChange}
        type="date" 
        />
      </div> 
      <div>
        <select 
        name = "country"
        onChange={onChange} 
        value={input.country}>
          <option></option>  
          <option value="kr">한국</option>
          <option>영국</option>
          <option>미국</option>
        </select>
      </div>
      <div>
        <textarea 
        name = "bio"
        onChange={onChange}
        value = {input.bio}></textarea>
      </div>
    </div>
  )
}


export default Register

 

 

 

 

출처 : 인프런 ) 한 입 크기로 잘라 먹는 리액트 - 이정환