useState

useState,useEffect Hook 말고도 여러가지가 더 있고 커스텀해서도 할 수는 있지만

여기서는 아까 말한 두 가지를 다뤄보고자 한다.

React에서 Hook을 구현하는 핵심은 바로 Closure다.

클로저를 간단히 만들어보면

function getAdd() {
  let foo = 1
  return function() {
    foo += 1
    return foo
  }
}
const add = getAdd()
console.log(add()) // 2
console.log(add()) // 3

useState

setCount의 값으로 2를 집어넣었으니 2가 나오겠징? ㅎㅎ

function useState(initVal) {
  let _val = initVal
  const state = _val
  const setState = newVal => {
    _val = newVal
  }
  return [state, setState]
}
const [count, setCount] = useState(1)
console.log(count) // 1
setCount(2)
console.log("next", count) // 1 (?)

...?

분명 setCount의 값으로 2를 줬는데 왜 1이지??

useState function을 살펴보면 1이라는 값이 initVal로 들어가고 난 후 그걸로 끝나기 때문에 백날 클릭해도 1이라는 값이 계속 나온다.

따라서, 값을 쓰는 게 아니라 함수 호출 방식으로 바꾸게 되면 호출시마다 값을 바꾸기 때문에 setCount의 값을 제대로 가져올 수 있다.

정상적으로 2가 나온다.

참고 : https://www.rinae.dev/posts/getting-closure-on-react-hooks-summary