React Hook에서의 클로저

들어가기

React Hook인 useState에서 클로저를 사용해 상태를 저장하고 관리한다고 한다.. 이제 이게 정확히 어떤 식으로 작동되는지는 알아보자

useState를 간단하게 구현해보자

간단하게 직접 구현해 보면 아래처럼 구현할 수 있지 않을까..?

const useState = (initialValue) => {
  let val = initialValue;

  const state = () => {
    return val;
  };

  const setState = (newVal) => {
    val = newVal;
  };

  return [state, setState];
};

const App = () => {
  const [state, setState] = useState(0);

  return {
    change: () => setState(1),
    render: () => console.log(state()),
  };
};

const newApp = App();

newApp.render(); // result: 0
newApp.change();
newApp.render(); // result: 1

하지만 state값을 실행을 해 값을 받아오는 방식은 리액트에서 사용하는 useState와 다르다.

그래서 useState를 아래와 같이 바꾸면 또 _val은 초기 값만 기억하고 있기 때문에 최신 값으로 변경되지 않는다..

const useState = (initialValue) => {
  let val = initialValue;

  const setState = (newVal) => {
    val = newVal;
  };

  return [val, setState];
};

이 문제를 해결하기 위해서 값을 useState 내부가 아닌 다른 클로저의 내부로 이동시켜 값을 저장하는 방법으로 해결한다.

const React = (() => {
  let val;

  const useState = (initialValue) => {
    val = val || initialValue;

    const setState = (newVal) => {
      val = newVal;
    };

    return [val, setState];
  };

  return { useState };
})();

const App = () => {
  const [state, setState] = React.useState(0);

  return {
    change: () => setState(1),
    render: () => console.log(state),
  };
};

const newApp = App();

newApp.render();
newApp.change();

App().render();
// 리액트에서 리렌더링은 함수를 다시 호출 하는 것과 같기 때문에
// 상태 변경 후 App의 render를 다시 호출해 최신 값으로 유지한다

이렇게 수정하면 state함수를 호출하지 않고 사용할 수 있다..!

Q&A

질문: React Hook에서 클로저가 어떻게 쓰이나요?
답변: React Hook을 사용할 때 필요한 정보들(상태/의존 값 등)을 컴포넌트 외부에 저장해서 사용하는데 이때 해당 값에 접근하기 위해 클로저를 사용합니다.

---

참고 - https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/