컴포넌트 내부에서 컴포넌트의 상태값 -> 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값
import React, { useState } from 'react';
const [value, setValue] = useState({
id: '',
pw: '',
});
const saveUserValue = e => {
const name = e.target.name;
const targetValues = { ...value, [name]: e.target.value };
setValue(targetValues);
};
useState()
를 사용해서 state를 관리한다.
- 첫번째 요소 : 동적으로 관리하고자 하는 상태값
- 두번째 요소 : 상태값을 업데이트하는 함수
- useState()에 인자는 state의 초기값
- 결국
value = { id: '', pw:'' }
이고 해당 객체에 변화를 주고 싶으면 setValue()로 관리하게 되는 것이다.saveUserValue()
함수 호출 시 spread문법으로 기존 value의 값들을 가져온 후 해당 value객체에 해당하는 키의 값을 setValue()를 통해서 e.target.value로 업데이트 시킨다.- setState function으로 해당 state를 업데이트하지 않고 단순 할당으로는 바뀐 값을 기준으로 화면이 다시 그려지지 않는다. setState function을 통해 state의 값을 변경해야만 값의 업데이트와 리렌더링의 효과를 볼 수 있다.