클로저란?

Q.클로저에 대해 설명해주세요

JS에서 함수가 선언될 때의 스코프를 기억해 함수 생성 후에도 그 스코프에 접근할 수 있는 기능입니다.

클로저는 JS의 함수가 일급객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다.

 

예시 코드

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable: ' + outerVariable);
    console.log('Inner Variable: ' + innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');

 

실행 결과

Outer Variable: outside
Inner Variable: inside

 

innerFunction은 outerFunction의 내부에서 정의됐습니다.

innerFunction은 자신이 선언된 스코프인 outerFunction의 스코프를 기억하고 outerFunction이 호출되어 innerFunction이 반환된 후에도 그 스코프에 접근할 수 있습니다.

따라서 outerVariable에도 접근이 가능해 innerFunction 내부에는 없는 outerVariable을 사용해 로그를 출력합니다.

 

활용 예시

변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 활용됩니다.

 

데이터 은닉

클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있습니다.

데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지합니다.

예를들어 특정 함수 내부에서만 접근 가능한 변수를 만들고, 그 변수를 조작하는 함수만 외부로 노출하여 안전하게 데이터를 관리할 수 있습니다.

 

익숙한 예시로 state가 있습니다. state는 직접 변경할 수 없고 항상 setState라는 setter 함수를 이용해 업데이트하는데요.

이 부분이 바로 클로져가 데이터 은닉을 목표로 활용된 예시입니다.

 

function createUseState() {
  // 클로저로 보호되는 상태 저장소 (외부에서 직접 접근 불가)
  const states = [];
  let stateIndex = 0;

  // useState 함수 반환
  return function useState(initialState) {
    // 현재 호출에 해당하는 인덱스 저장
    const currentIndex = stateIndex;
    
    // 첫 렌더링 시에만 초기값 설정, state가 함수인 경우 지연초기화 패턴을 지원해 마운트시에만 계산하도록 함
    if (states[currentIndex] === undefined) {
      states[currentIndex] = typeof initialState === 'function' 
        ? initialState() 
        : initialState;
    }
    
    // 상태 설정 함수 (클로저를 통해 특정 인덱스의 상태에만 접근)
    const setState = (newState) => {
      // 함수형 업데이트 지원
      const nextState = typeof newState === 'function' 
        ? newState(states[currentIndex]) 
        : newState;
      
      // 상태가 변경되면 컴포넌트 리렌더링 (실제 useState에서는 리렌더링 트리거)
      if (nextState !== states[currentIndex]) {
        states[currentIndex] = nextState;
        // 리렌더링 트리거
      }
    };

    // 다음 useState 호출을 위해 인덱스 증가
    stateIndex++;
    
    // 현재 상태와 상태 설정 함수 반환
    return [states[currentIndex], setState];
  };
}

소중하게 관리해야하는 state와 현재 state가 states 배열에 저장된 순서를 의미하는 currentIndex는 내부에 은닉되어있고, state를 업데이트할 수 있는 setState와 값을 확인할 수 있는 states[currentIndex]를 반환해 안전하게 state를 관리할 수 있게됩니다!

 

비동기 작업

클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야할 때도 유용합니다.

콜백함수가 비동기적으로 실행될 때 클로저를 활용하면 함수 실행 시점의 변수를 참조할 수 있습니다.

즉, 미래에 실행될 코드가 과거의 상태에 접근해야할 때 사용할 수 있습니다!

 

모듈 패턴 구현

모듈 패턴은 특정 기능을 캡슐화하고, 외부에 공개하고자 하는 부분만 선택적으로 노출하여 코드의 응집력을 높이고 유지보수성을 향상시키는 패턴입니다.

클로저의 데이터은닉 특성을 활용해 모듈 패턴을 쉽게 구현할 수 있습니다.