[React] 구조분해 할당 이용한 useState() 리팩토링

Form Data 더 쉽게 다루기

---

적용한 토이 프로젝트 

https://github.com/JEONGHWANMIN/raect-json-server

평소 내가 작성하던 방식

평소에는 각각의 useState()를 작성해 놓고 나서

 onChange() 를 이용해서 각각 setWriter , setTitle , setText 이런식으로 

이벤트를 다뤘었는데 오늘 좀더 새로운 방식을 공부 했는데

신선하고 좀 더 가독성이 좋은거 같아서

정리해 보려고 한다.

<전>

const [writer, setWriter] = useState("")
  const [title, setTitle] = useState("")
  const [text, setText] = useState("")
  const onChange = (e) => {
    const { name } = e.target
    if (name === 'writer') {
      setWriter(e.target.value)
    } else if (name === 'title') {
      setTitle(e.target.value)
    } else if (name === 'text') {
      setText(e.target.value)
    }

 

이 코드를 새로 배운 방식을 적용해서 좀 더 깔끔하게 적용하면

<후>

  const [formData , setFormData] = useState({
  	writer : "",
    title : "",
    text : ""
  })
  const {writer , title , text} = formData
  const onChange = (e) => {
      setFormData((preState) => ({
      	...preState,
        [e.target.name] : e.target.value
      }))
    }

이런식으로 정리 할 수 있다.

각각 input tag name에 해당하는 값을 넣어줘야 작동한다.

 

---

이렇게 작동하는 원리가 

어떠한 값이 있는 변수를 []로 감싸면 key값으로 인식해서 

그 키 값에 값을 넣는 원리이다.

Result

{object} 객체 안에서 [key]로 변수에 있는 변수값을 이용해서

좀더 쉽게 Form 요소를 조작 할 수 있다.

{[key] : value}