State 병합하기 (React)

김종화·2023년 6월 28일
0

React

목록 보기
1/7

리액트에서는 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로 사용해야 한다.

0개의 댓글