useState, 클로저를 활용하여 동작한다고?

이번 포스팅에서는 클로저에 대해서 간단히 알아보고,

클로저가 활용되는 예시 중 하나인 useState의 내부 동작 방식을 자세히 알아보도록 하겠습니다.

 

 

 

✔️ 클로저란?

함수형 프로그래밍 언어에서 사용되는 중요한 특성 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다.

자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문에 발생하는 현상입니다.

W3C School에서는 클로저를 함수가 private한 변수를 사용할 수 있도록 한다고 설명합니다.

이 설명이 클로저의 기능을 쉽게 이해하는 데 도움이 되었습니다.

 

 

---

여기서 렉시컬 스코프란?

자바스크립트 엔진은 함수가 호출되는 위치가 아닌 함수를 어디에 정의했는지에 따라 함수의 상위 스코프를 결정합니다.

상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정됩니다.

---

 

 

정리를 해 보자면,

¹ 외부 함수보다 상위 스코프의 식별자를 참조하는 중첩 함수가 더 오래 유지되는 경우

² 중첩 함수가 이미 생명 주기가 종료된 외부 함수의 변수를 참조하는 경우

이 중첩 함수를 클로저라고 부릅니다.

 

 

클로저인 중첩 함수

const x = 10;
function outerFunc() {
    const x = 1;
    function innerFunc() {
      console.log(x); // 1
    }
    
    innerFunc();
}

outerFunc();

 

클로저가 아닌 중첩 함수

const x = 10;
function outerFunc() {
    const x = 1;
    function innerFunc() {
      const y = 2
      console.log(y); // 2
    }
    
    innerFunc();
}

outerFunc();

 

 

 

✔️ 클로저의 활용

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용됩니다.

다시 말해, 상태를 은닉하여 의도치 않은 변경을 방지하고 특정 함수로만 상태 변경을 허용하기 위해 사용할 수 있습니다.

 

let a = 1;

function add() {
    a += 1;
    return a;
}

console.log(add()); // 2
console.log(add()); // 3
console.log(add()); // 4
a = 999;
console.log(add()); // 1000

위 예제와 같이 a를 전역 변수로 사용할 경우, 의도치 않은 상태 변경이 이루어질 수 있기 때문에 오류가 발생할 수 있습니다.

 

 

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

console.log(add()); // 2
console.log(add()); // 3
console.log(add()); // 4
console.log(a); // Uncaught ReferenceError: a is not defined

위 예제와 같이 클로저를 활용하여 상태가 의도치 않게 변경되지 않도록 은닉하여 상태를 안전하게 변경하고 유지할 수 있습니다.

 

 

 

 

✔️ useState가 클로저를 사용하는 방식

useState의 내부 동작에 관련한 다음 문단은 2019년 JSConf에서 발표된 React Hooks와 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());
setCount(2);
console.log(count());

아주 간단하게 다음과 같은 방식으로 useState 메소드를 작성할 수 있습니다.

그러나 상태 값을 조회하기 위해 getter 함수를 사용하는 방식이 아닌 기존의 useState가 값을 가져오는 패턴처럼 변경하고 싶습니다.

 

 

 

단계적으로 리팩토링을 거쳐 봅시다.

 

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

const [count, setCount] = React.useState(1); 
console.log(count()); // 1
setCount(2); 
console.log(count()); // 2

즉시 실행 함수를 사용하여 React 모듈 내에서 useState를 정의하도록 변경했습니다.

 

 

 

const React = (function () { 
    /* 3️⃣ */
    let _val;
    function useState(initVal) { 
        const state = _val || initVal;
        const setState = (newVal) => { 
          _val = newVal; 
        }; 
        return [state, setState]
    }
    /* 2️⃣ */
    function render(Component) {
        const C = Component(); 
        C.render(); 
        return C;
    }
        return { useState, render };
})();

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

let App;
App = React.render(Component); // 1
App.click();
App = React.render(Component); // 2

1️⃣ 리액트를 흉내내기 위한 Component를 만들어 줍니다.

Component 내부에서는 render 메소드로 count를 콘솔에 출력하고, 버튼 역할을 할 click 메소드를 두어 count의 값을 증가시킵니다.

2️⃣ React 모듈에게는 렌더링할 컴포넌트가 있다는 사실을 알려 주어야 합니다.

React 모듈 내에 render 함수로 컴포넌트를 렌더링한 후 파라미터로 받은 컴포넌트를 반환합니다.

 

3️⃣ 그리고 React 모듈의 useState 내에서 사용되고 있던 _val 변수를 상위로 끌어올려 React 함수의 스코프로 이동시킵니다. (클로저의 용법 활용)

_val 값은 useState 함수에 의해 참조되고 변경될 수 있습니다.

 

 

 

 

 

이 useState에는 버그가 있습니다. 상태를 하나 더 추가하면 다음과 같은 현상이 발생합니다.

 

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

var App = React.render(Component); // {count: 1, text: 'apple'}
App.click();
var App = React.render(Component); // {count: 2, text: 2}
App.text("banana");
var App = React.render(Component); // {count: 'banana', text: 'banana'}

이 방식의 useState _val이라는 단 한 개의 변수를 사용하고 있고, count와 text 둘 다 _val 변수에 덮어 씌워지기 때문에 다음과 같은 현상이 발생합니다.

 

 

 

이 문제를 해결하기 위해 리액트에서는 내부적으로 인덱스(idx)를 두고, 상태 배열(hooks)을 사용합니다.

const React = (function () {
    let hooks = [];
    let idx = 0
    function useState(initVal) {
        const state = hooks[idx] || initVal;
        const _idx = idx; // freeze idx using closure
        const setState = (newVal) => {
            hooks[_idx] = newVal;
        };
        idx++
        return [state, setState];
    };
    function render(Component) {
        idx = 0;
        const C = Component();
        C.render();
        return C;
    };
    return { useState, render };
})();

  

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

var App = React.render(Component); // {count: 1, text: 'apple'}
App.click();
var App = React.render(Component); // {count: 2, text: 'apple'}
App.text("banana");
var App = React.render(Component); // {count: 2, text: 'banana'}

 

 

 

 

또한 여기서 리액트 훅이 반복문, 조건문, 중첩 함수 내에서 호출할 수 없다는 규칙의 이유에 대해서도 자세히 알 수 있습니다.

function Component() {
    if (Math.random() > 0.5) {
        const [count, setCount] = React.useState(1);
    }
    const [text, setText] = React.useState("apple"); // ⬅️
    return {
        render: () => console.log({count, text}),
        click: () => setCount(count + 1),
        text: word => setText(word)
    };
}

다음과 같이 useStae를 조건문 내에서 사용할 경우, 화살표가 가리키는 useStae의 인덱스는 0이 될 수도 있고 1이 될 수도 있습니다.

이와 같은 동작은 상태가 hooks 배열 내에서 예측할 수 없는 위치에 저장됩니다.

 

따라서 훅은 상태가 일관된 순서로 저장되어 예측 가능하고 안정적으로 동작하는 것을 보장하기 위해 컴포넌트의 최상위 레벨에서만 사용되어야 합니다.

 

 

 

 

☘️ 참고

모던 자바스크립트 Deep Dive ― 24장 클로저

Can Swyx recreate React Hooks and useState in under 30 min? - JSConf.Asia