useState(init)
; const initCount=0
const [count, setCount] = useState(initCount);
// const [읽기전용, 쓰기전용] = useState(초기값);
// count = 0 < -초기설정 값
// setCount = ƒ()
setCount(4);) // count = 4
return (
<>
<p>내 나이는 {count}살!</p>
// 내 나이는 4살
</>
)
클래스형 컴포넌트에서는 state객체안에 값을 저장했고, 사용할땐 state.값이름
을 사용했다.
hooks에서도 객체형 state를 만들수 있기때문에 이전 클래스에서 사용하는 방식(this.state.count
, setState({count:count+1})
)으로 비슷하게 사용한다.
객체로 state를 관리하는 경우를 위해 useReducer훅을 제공한다. 이와 같이 사용할 경우 useReducer 사용을 염두해 두도록!
const person, setPerson = useState({name:'이름', age:22})
console.log(person) // {name:'이름', age:22}
setPerson({name : '도롱뇽'})
console.log(person) // {name:'도롱뇽'} : age 키가 제거?
setPerson({age : 33})
console.log(person) // {age:33} : name키가 삭제되었다..!
--------------- 아래처럼 사용하기 -------------------
setPerson({...person, name:'도롱뇽'})
console.log(person) // {name:'도롱뇽', age:33}
주의
setState()
할 때 객체의 모든 key+value-pair를 전달받고, 수정할 키에 값을 할당해야 한다.setPerson({...person, 변경할key:newValue}) // ...person ! 전개연산자 사용한 것 잊지 말기