🖐️자깜마안! 혹시, 시간 있어요? 시간 있으면...........hook의 탄생 설화를 먼저 보고와염(시간 없어도 먼저 읽고 오는걸 권장)
#part1. react component
#part2. component의 종류
#part3. hooks의 탄생

useState은?

컴포넌트의 state(상태)를 간편하게 update 할 수 있게 하는 도구 !

useState의 기본 형태와 동작 원리

const [count, setCount] = useState(초기값)

//배열구조분해 형태

1. count라는 변수를 선언 ! (변수명은 원하는 거 아무거나 해도 됨!)
2. 따라서 최초 렌더 되었을 때의 count 변수 값은 useState(초기값)과 동일
   리액트는 count변수를 리렌더링 때 기억하고, 가장 최근에 갱신된 값을 제공함
3. count의 값을 갱신하고 싶을 때 setCount 함수를 호출하여 count의 값을 변경한다.
   새롭게 받아온 값을 큐(queue)에 등록
   🔔 참고 큐(queue)는 선입 선출의 구조임

   ✚ 함수적 갱신

   "setCount" 함수 내에서 이전값을 사용해서 setCount로 count값을 갱신
   (= count 값을 갱신하는데, setCount의 함수 내에서 처리함)
   이전 count를 사용해서 새로운 state를 계산하는 경우: setCount로 전달하여 이전 state값을 받고, 갱신된 값을 반환하는 형태

❓ setCount를 활용하여 count의 값이 update되면?

1. 화면은 다시 렌더링 됨
2. count 안에는 update 된 값이 들어감

class형 컴포넌트의 this 형태와 비교!

❌ 함수형 컴포넌트에서는 this를 가질 수 없음, 따라서 this.state의 형태는 불가능!

• count = this.state.count
• setCount = this.setState
• class형 컴포넌트에서 초기값은 only 객체형태
• useState = this.state
• count의 값을 가져올 때 !!

// 함수형 컴포넌트(hook 사용)
{count} 이런 형태로 직접 사용가능

//class형 컴포넌트
{this.state.count}

• 갱신할 때 !!

// 함수형 컴포넌트
onClick = {() => setCount(count + 1)}

// class형 컴포넌트
onClick = {() => this.setState({count:this.state.count +1})}

결론

초점은 state 변수의 값 내지는 그 값의 변화를 중심으로 보자 !
그러니깐, 렌더링 됐을때 state에 뭐가 들어 있을지, 어떤 값으로 update되어 있을지를 염두해서 구조를 생각하면 조금더 쉽게 접근이 가능 !