--- React 코드 작성 시, 한 컴포넌트 내에서 여러 개의 `input`이나 `textarea`로 여러 개의 `data`를 관리해야할 수도 있다. ```tsx import { useState } from 'react'; export default function Write() { const [title, setTitle] = useState(""); const [tag, setTag] = useState("");

setTitle(e.target.value)} /> setTag(e.target.value)} />

``` 글쓰기 페이지를 만드는데, 이런 경우 내가 input을 만들 때마다 State도 만들어줘야하는 번거로움이 생긴다. 개수가 제한이 됐더라도, 그 개수가 100개 이상이면?\ 물론 그럴 일은 잘 없겠지만, html 코드는 둘째 치고 State 코드도 길어지고 번거로워질 것임이 틀림없다. ## 방법 `{}`, `object` 형태로 선언해주면 될 것이다. 또한, `spread` 문법으로 배열을 개별 요소로 분리후, 이벤트 객체(`e`)를 동적으로 선택해 업데이트하게 만든다. ## 개선 코드 ```tsx import { useState } from 'react'; export default function Write() { const [post, setPost] = useState({ title: '', tag: '', }); const onChangeInputPost = (e) => { setPost({...post, [e.target.className]: e.target.value}); };

``` ```jsx const onChangeInputPost = (e) => { const { className, value } = e.target; setPost({...post, [className]: value}); }; ``` 이렇게 `className`, `value`를 따로 변수에 지정해줘도 괜찮을 듯하다. 취향차이일 거 같다. 어찌됐든, `state`는 개선됐지만, state 실행 함수인 `setPost`가 조금 불안하다. 왜 [불안](the-difference-between-state-and-prev)할까?