useState(init);

  const initCount=0
  const [count, setCount] = useState(initCount);
	// const [읽기전용, 쓰기전용] = useState(초기값);
	// count = 0 < -초기설정 값 
	// setCount = ƒ()

  setCount(4);) // count = 4
  
  return (
    <>
      <p>내 나이는 {count}살!</p>
      // 내 나이는 4살
    </>
  )

• useState는 길이 2짜리 배열 반환 : 값, 그리고 값을 변경할수 있는 함수
• 배열 구조분해 할당(Destructuring) 사용하여 배열 분리하여 사용
• 인자로 초기값 전달, 해당 값 초기화 기능 있을 경우, 초기값 변수 사용 추천!

객체(object) 사용하기

클래스형 컴포넌트에서는 state객체안에 값을 저장했고, 사용할땐 state.값이름을 사용했다.
hooks에서도 객체형 state를 만들수 있기때문에 이전 클래스에서 사용하는 방식(this.state.count, setState({count:count+1}))으로 비슷하게 사용한다.

객체로 state를 관리하는 경우를 위해 useReducer훅을 제공한다. 이와 같이 사용할 경우 useReducer 사용을 염두해 두도록!

• 객체를 인자로 사용할 때는 기존의 key+value-pair을 인자로 전달받고, 변경된 key+value-pair를 전달

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 ! 전개연산자 사용한 것 잊지 말기