hooks는 어떻게 closure을 사용하고 있을까

hooks가 클로저를 사용한 거라던데, 그게 무슨의미일까요? 라는 질문에 답하지 못한다면 다음 영상을 볼 것을 추천한다.

클로저부터 리액트 내부 동작을 형상화한 라이브코딩을 보며 단계별로 리액트 훅의 내부 원리를 이해하기가 좋았다. 원문은 블로그로 되어 있는데, 검색하면 바로 나오지만 미래의 나를 위해 내 언어로 다시 한 번 정리하고자 한다.

클로저란?

먼저 클로저에 대해서 질문을 통해서 정리하고 가보자.

 

1. 클로저란?

함수와 함수가 선언된 어휘적 환경의 조합이다.

2. 클로저를 언제 사용하는가?

상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고, 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 추가로, 부분적용 또는 커링함수에 사용된다.

3. 클로저에서 함수가 실행 종료되었음에도 변수에 접근할 수 있는 이유는 무엇인가?

가비지 컬렉터의 작동 방식 때문이다. 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있으면 그 값을 수집 대상에 포함시키지 않기 때문이다.

 

위 영상에서는 클로저를 이렇게 정의하고 있다.

Closure makes it possible for a function to have "private" variables.
클로저는 함수가 프라이빗한 변수를 가질 수 있도록 해준다.

 

어떻게 프라이빗한 변수를 가지게 해 주는지 코드로 살펴보자.
만약 내가 더하는 기능을 하는 함수를 만들고 싶다고 해보자. 아래와 같이 만들 수 있을 것이다.

let foo = 1;
function add() {
    foo = foo + 1;
    return foo;
}

console.log(add()); // 2
console.log(add()); // 3
console.log(add()); // 4
console.log(add()); // 5
console.log(add()); // 6

그런데 누군가가 갑자기 내 코드 중간에 foo를 다시 정의해버린다면, 원하는 값을 얻지 못할 것이다.

let foo = 1;
function add() {
    foo = foo + 1;
    return foo;
}

console.log(add()); // 2
console.log(add()); // 3
foo = 10000;
console.log(add()); // 10001
console.log(add()); // 10002
console.log(add()); // 10003

이럴 때 사용할 수 있는게 클로저다!

클로저를 이용해서 외부에서 내가 private하게 관리하고 싶은 변수에 접근하지 못하도록 할 수 있다.

function getAdd(){
    let foo = 1;
    return function (){
        foo = foo + 1;
        return foo;
    };
}

const add = getAdd();
console.log(add()); // 2
console.log(add()); // 3
console.log(add()); // 4
console.log(add()); // 5
console.log(add()); // 6

getAdd라는 함수는 실행되어 사라졌고, foo라는 변수도 함께 사라졌지만, getAdd가 반환한 함수는 foo를 사용하고 있기 때문에 클로저인 것이고, 외부에서 더이상 foo라는 변수에 직접 접근할 수는 없지만(정보 은닉) 리턴받은 함수를 이용해 foo라는 값을 증가시킬 수 있다!

closure를 hook에 적용하기

useState는 어떻게 클로저를 활용하고 있는가?

이제 useState가 어떻게 이 클로저를 활용하고 있는지 아래 코드로 살펴보자.

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(count()); // 2 

이 코드를 보면 클로저를 사용하고 있음을 알 수 있다. useState를 실행시켜 _val이란 변수는 이미 실행이 완료되어 사라졌지만, return으로 받은 state와 setState함수에서 _val에 접근할 수 있기 때문이다.

(setState이후 업데이트된 state를 가져오기 위해 state를 getter함수로 만들어 count()이런 식으로 state를 사용해야 해서 뭔가 이상하지만 일단 이 부분은 넘어가고 클로저만 이해해보자)

 

이런 원리를 이용해서 React라는 모듈을 만든다고 해보자. React라는 모듈안에 즉시 실행 함수로 위의 함수를 반환하게 하면 될 것이다. useState라는 모듈을 이용해서 컴포넌트를 render하는 기능을 간단하게 아래와 같이 나타낼 수 있다.

const React = (function() {
  function useState(initVal) {
    let _val = initVal
    const state = _val
    const setState = newVal => {
      _val = newVal
    }
    return [state, setState]
  }

  function render(Component){
    const C = Component()
    C.render();
    return C;
  }

  return {useState, render}
})()


function Component(){
    const [count, setCount] = React.useState(1)
    return{
         render: () => console.log(count),
          click : () => setCount(count+1),
    }
}

const App = React.render(Component)
App.click();
var App = React.render(Component)

이렇게 하면 count가 정상적으로 업데이트 될까? 안 된다!

왜냐하면 useState의 _val에는 initVal 값인 1이 계속 할당 될 것이기 때문이다!

 

count할 때마다 증가하게 하고 싶다면! _val변수를 바깥으로 빼서 클로저를 두 번 활용하면 된다!!

const React = (function(){
  let _val
  function useState(initVal){
      const state = _val || initVal;
    // ...
  }
  // ...
})()

이제 _val이란 변수가 살아있게 되기 때문에 React.render(Component)를 여러번 호출해도 _val값이 유지되어 click이후에 render해보면 count가 정상적으로 변경되고 있는걸 볼 수 있다.

여러개의 훅을 사용하려면?

그러나 실제 코딩하다보면 훅을 여러개 사용하는 경우가 많다. 여러개 사용할 때는 어떻게 하는가? 훅에 대한 내용을 보다보면 훅은 상태를 배열로 관리한다든지 훅은 최상위에서만 사용할 수 있고, 조건문 반복문 안에서 사용할 수 없다라는 말이 나온다.

 

이런 말이 나오는 이유가 바로 다음에 있다. 위의 예시 코드들에서 _val이란 변수를 사용하는 대신 실제로 훅은 배열로 이 값들을 관리하며, render함수가 호출될 때마다 hooks 배열안의 값들을 돌고 index가 다시 0으로 초기화 되는 것이다.

 

따라서 만약 조건문 안에 훅을 사용한다면 어떨 때에는 배열의 의도한 인덱스 안에 그 값이 저장될 것이고, 어떨 때에는 의도하지 않은 인덱스 안에 저장될 것이기에 상태값을 제대로 관리할 수 없을 것이다.

 

다음은 hooks라는 배열과 currenthook이라는 인덱스를 통해 리액트의 동작방식을 흉내낸 코드이다.

const MyReact = (function () {
  let hooks = [],
    currentHook = 0; // 모듈 스코프 안에 이 변수를 들고 있게 한다.

  return {
    render(Component) {
      const Comp = Component();
      Comp.render();
      console.log("hooks", hooks);
      currentHook = 0; // reset for next render
      return Comp;
    },
    useEffect(callback, depArray) {
      const hasNoDeps = !depArray;
      const deps = hooks[currentHook];
      const hasChangedDeps = deps
        ? !depArray.every((el, i) => el === deps[i])
        : true;

      if (hasNoDeps || hasChangedDeps) {
        callback();
        hooks[currentHook] = depArray;
      }
    },
    useState(initialValue) {
      hooks[currentHook] = hooks[currentHook] || initialValue;
      const setStatehookIndex = currentHook;
      const setState = (newState) => (hooks[setStatehookIndex] = newState);
      return [hooks[currentHook++], setState];
    }
  };
})();

function Counter() {
  const [count, setCount] = MyReact.useState(1);
  const [text, setText] = MyReact.useState("text");
  MyReact.useEffect(() => {
    console.log("effect", count);
  }, [count]);
  return {
    click: () => setCount(count + 1),
    noop: () => setCount(count),
    render: () => console.log("render", { count, text }),
    write: () => setText(text + "chage")
  };
}

let App;
App = MyReact.render(Counter);
App.click();
App = MyReact.render(Counter);
App.noop();
App = MyReact.render(Counter);
App.write();
App = MyReact.render(Counter);

예시 코드에서는 수동으로 render를 돌려줬지만, 리액트에서 우리는 setState를 통해 리액트에게 render하라고 알려주고 있다.