리액트에서는 State가 변경될 때마다 렌더링이 일어난다.
렌더링이 자주 일어나면 웹의 성능에 이슈가 일어날 수 있다.
렌더링을 최소화하기 위해 State를 하나로 합쳐보자
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const titleChange = (event) => {
setTitle(event.target.value)
}
const contentChange = (event) => {
setContent(event.target.value)
}
<div>
<input
value={title}
onChange={titleChange}
/>
<input
value={content}
onChange={contentChange}
/>
</div>
코드를 살펴보자 함수와 State를 두 번 선언하여 input 값이 변화될 때마다
렌더링이 일어나고 value값을 그려주고 있다 두 개의 함수와 State를 합쳐보자
const [body, setBody] = useState({title:'', content:'')
// title과 content 값을 추적할 하나의 State를 선언하고 객체형태로 묶어주고
// 초기값을 설정한다
const bodyChange = (event) => {
const {name, value} = event.target // event.target에서 name과 value 추출
setBody({...body, [name]:value}) // 기존의 body를 복사한뒤
// name 키를 가진 value로 설정한다
}
<div>
<input
value={body.title} // value 값 수정
name = 'title' // 각각 input창에 문자형태 name 값부여
onChange={titleChange}
/>
<input
value={body.content} // value 값 수정
name = 'content' // 각각 input창에 문자형태 name 값부여
onChange={contentChange}
/>
</div>
name 값이 문자열이라는 것에 주의! 현재 값이 객체로 선언되어 있기 때문에
나중에 title, content를 변수로 활용할 때에는
body.title, body.content로 사용해야 한다.