useState와 클로저

useState와 클로저

함수형 리액트에서 컴포넌트가 리렌더링 된다는 것은 함수가 종료되었다가 다시 실행되는 것이다. 그럼 종료된 함수가 갖고 있던 state를 어떻게 기억하고 이전 state와 현재 state를 비교하는 걸까?

 

답은 클로저에 있다.

클로저

클로저는 함수가 생성될 당시의 환경을 함수가 종료된 후에도 기억하는 속성이다.

아래 코드에서 볼 수 있듯, add()함수가 종료되고 재 실행되어도 foo 변수의 이전값을 기억하고 foo += 1을 수행하고 있다.

// 참고 : https://www.fronttigger.dev/2022/react/react-hook-closure

const add = (function getAdd() {
  let foo = 1

  return function () {
    foo += 1

    return foo
  }
})()

console.log(add()) // 2
console.log(add()) // 3
console.log(add()) // 4

useState

useState에서 클로저가 적용된 부분만 이해하기 쉽게 나타내 보았다.

useState외부에 _state변수가 있기 때문에 useState함수가 종료되어도 _state변수는 계속 기억되고 컴포넌트의 이전 state를 기억할 수 있는 것이다.

const React = () => {
	let _state;
    
    const useState = (initVal) => {
    	const _initVal = _state||initVal
        ...
        return [state,setState]
    }
}