MDN에서는 클로저를 "주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합이며, 이를 통해 외부 함수의 실행이 종료되더라도 내부 함수에서 외부 함수의 범위에 대한 접근을 제공한다." 라고 설명한다. 하지만 설명만으로는 제대로 이해가 되지 않았고 이를 확실히 알기 위해 이 글을 포스팅한다.

TL;DR

클로저는 함수가 선언될 때의 환경을 기억하여, 함수 내부에서 선언된 변수가 함수 외부에서 참조(접근) 가능하도록 만드는 메커니즘이다.

클로저의 특징은 다음과 같다.

• 데이터 보존 및 은닉화 가능
• 모듈화에 유리
• private 변수 구현 가능
• 잘못 사용 시 메모리 누수 발생 가능
• 가비지 컬렉션 처리가 복잡

클로저의 기본 개념

MDN의 설명대로 클로저를 한 줄로 설명하자면 함수 내부에서 선언된 변수가 함수 외부에서 참조 가능하도록 만드는 메커니즘이다.

예제를 통해 클로저의 기본 개념을 알아보자.

function outer() {
  let a = 10;
  console.log(a);
}
outer(); // 10
console.log(a); // ReferenceError

이 코드에서 함수 outer() 내부에서 선언된 변수 a는 함수 내부에서만 접근이 가능하다. outer()가 종료된 후 전역에서 a에 접근하려고 하면 당연히도 ReferenceError가 발생하는데, 이는 a가 함수의 실행 컨텍스트 내에만 유효하기 때문이다.

그러나 클로저를 활용하면 외부 함수 내부에 있는 변수에 함수 외부에서도 접근할 수 있다.

function outer() {
  let a = 10;
  return function inner() {
    return a;
  };
}
let fn1 = outer();
console.log(fn1()); // 10

이 예제에서 함수 outer()는 inner() 함수를 반환한다. inner()는 외부 함수인 outer()의 변수 a에 접근할 수 있다. 이는 inner()가 선언될 때의 어휘적 환경을 기억하기 때문이다.

따라서 outer()를 할당한 함수 fn1()에서 outer() 함수 내부의 변수 a에 접근이 가능해지며 10을 반환한다.

이러한 동작이 가능한 이유는 JavaScript의 렉시컬 스코프(Lexical Scope) 특성 때문이다.

함수가 선언될 때 그 함수의 상위 스코프가 결정되며, 이 스코프 체인을 통해 변수를 찾아나간다. inner() 함수가 선언될 때 outer() 함수의 스코프를 기억하고 있기 때문에, outer() 함수가 실행을 마치고 콜 스택에서 제거된 후에도 inner() 함수는 여전히 outer() 함수의 변수 a에 접근할 수 있다.

이를 활용하면 다음과 같은 예제도 가능하다.

function counter() {
  let count = 0;
  return {
    increase: function() {
      return ++count;
    },
    decrease: function() {
      return --count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter1 = counter();

console.log(counter1.increase()); // 1
console.log(counter1.increase()); // 2
console.log(counter1.decrease()); // 1
console.log(counter1.getCount()); // 1

이 예제에서는 counter() 함수가 세 개의 메서드를 가진 객체를 반환한다.

각 메서드는 클로저를 형성하여 count 변수에 접근할 수 있다. 이를 통해 private 변수처럼 외부에서 직접적인 접근은 불가능하지만, 정의된 메서드를 통해서만 조작이 가능한 은닉화된 상태를 만들 수 있다.

이처럼 클로저는 데이터 프라이버시를 구현하고, 상태를 안전하게 관리하며, 모듈화된 코드를 작성하는 데 매우 유용한 JavaScript의 핵심 개념이다.

클로저의 장단점

1. 데이터 보존
   외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 계속 사용할 수 있는 특성을 통해 특정 데이터를 스코프 안에 가두어 계속 사용할 수 있는 폐쇄성을 갖는다.
2. 모듈화에 유리
   함수를 독립적인 형태로 분리하여 함수의 재사용성을 향상시킬 수 있다. 이를 통해 코드의 모듈화가 용이해진다.
3. 정보의 은닉화
   선언 당시 참조하던 외부 환경을 기억하여 정보 은닉이 가능하다. 이를 통해 외부로부터의 오염을 방지할 수 있다.
4. 메모리 누수
   제대로 사용되지 않으면 내부 함수가 더 이상 참조되지 않을 때까지 외부 함수 범위의 변수가 메모리에서 지워지지 않기 때문에 메모리 누수를 일으킬 수 있다. 따라서 루프를 돌면서 클로저를 계속 생성하는 설계는 지양해야 한다.
5. 가비지 컬렉션의 어려움
   클로저의 지속적인 특성으로 인해 가비지 컬렉터가 클로저가 더 이상 필요하지 않고 메모리에서 안전하게 제거할 수 있는 시기를 결정하기 어려울 수 있다.

React에서 클로저

React의 내장 훅(Hooks)과 클로저는 서로 밀접한 연관이 있다. 그 중 useState 훅의 동작 원리를 클로저 관점에서 살펴보자.

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

useState는 클로저를 활용하여 컴포넌트의 상태를 관리한다.
React는 내부적으로 다음과 같은 클로저 구조를 가진다.

// React 내부 동작 단순화 예시
function useState(initialValue) {
  let state = initialValue; // 클로저를 통해 유지되는 값
  
  const setState = (newValue) => {
    state = newValue;
    // 리렌더링 트리거
  };
  
  return [state, setState];
}

이 코드에서 주목할 점은 state 변수가 클로저를 통해 유지된다는 것이다. 컴포넌트가 리렌더링되더라도 state 변수는 클로저 덕분에 이전 값을 유지할 수 있다. 또한 각 컴포넌트 인스턴스는 자신만의 클로저를 가지므로, 서로 다른 컴포넌트의 상태가 독립적으로 유지된다.

function App() {
  return (
    <div>
      <Counter /> {/* 독립된 state */}
      <Counter /> {/* 독립된 state */}
    </div>
  );
}

이처럼 클로저는 React의 선언적이고 예측 가능한 상태 관리를 가능하게 하며, React의 상태 관리 시스템의 핵심 메커니즘으로서, 컴포넌트의 생명주기 동안 상태를 안전하게 보존하고 업데이트하는 역할을 한다.