[React] useState와 클로저

아마 react를 이용하고 있다면 한번 쯤 useState가 어떻게 이전 값을 가지고 있는지 (유지 되는지)를 고민해본 적이 있을 것이다.

 

알아보니 클로저의 개념을 이용해서 작동한다.

 

클로저의 사용하는 이점으로는

 

현재 상태를 유지하면서 최신 상태를 유지할 수 있는 점이 있다.

 

이걸 이용해서

 

const useState = (initialVal) => {

  let innerState = initialVal;
  const state =  innerState;
  const setState = (newVal) => {
    innerState = newVal;
  };
  
  return [state, setState];
};

const [counter, setCounter] = useState(0);

클로저가 innerState값을 기억하고 있기 때문에 

 

console.log(counter) 를 하게 되면 0을 볼 수 있다. 

 

리액트는 useState를 통해 생성한 상태를 접근하고 유지하기 위해서 useState메소드 바깥쪽에 state를 저장한다. 

 

이 state들은 선언된 컴포넌트를 유일하게 구분할 수 있는 키로 접근할 수 있으며 배열 형식으로 저장된다.

 

따라서 useState함수 안에서 선언되는 상태들은 배열에 순서대로 저장되며, 상태가 업데이트 되었을 때, 이 상태들은 리액트 컴포넌트 바깥에 선언되어 있는 변수들이기 때문에 업데이트한 후에도 이 변수들에 접근할 수 있게 된다. 

 

마지막으로 컴포넌트가 unmount될 때 해당 hook들을 메모리에서 제거해줘야한다. 

 

 

 

Ref

https://ko.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

 

https://yeoulcoding.me/m/149