클로저

클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합

즉 함수 안에 함수를 선언한 환경에서의 관계를 의미함

 

해당 함수안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역변수를 접근할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미함

 

자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능함

클로저는 반환된 내부함수가 자신이 선언되었을때의 환경(Lexical Environment)에서의 스코프를 기억하기 때문에 접근이 가능함

 

function outerFn() {
  let x = 10;
  return function innerFn(y) { // innerFn 함수는 클로저
    return x = x + y;
  }
}
let a = outerFn(); // 외부함수 호출은 한번만. 이제 a 변수는 innerFn 함수를 참조

a(5); // 15;
a(5); // 20;
a(5); // 25;

 

▶ 클로저를 사용하는 이유

정보의 접근 제한(캡슐화) - Private Method

자바스크립트 내에서는 메소드를 Private Method 형태로 선언할 수 있는 기능을 제공하지 않음

그렇기에 이와 비슷한 형태로 정보의 접근을 제한하는 캡슐화를 클로저 개념을 이용하여 구성할 수 있음

 

- Private Method

같은 클래스 내부의 특정 메소드에서만 해당 메소드를 호출이 가능한 것을 의미

코드의 제한적인 접근만을 제공한다는 장점이 있음

전역 네임 스페이스를 관리하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 함

 

import { useEffect } from 'react';

const closure1PrivateMethod = () => {
	useEffect(() => {
		console.log(counter.value()); // logs 0
		counter.increment();
		counter.increment();
		console.log(counter.value()); // logs 2
		counter.decrement();
		console.log(counter.value()); // logs 1
	}, []);

	const counter = (() => {
		// 외부의 함수의 변수를 선언
		let count = 0;

		// 전달 받은 값을
		const changeBy = (value: number) => {
			count += value;
		};

		return {
			increment: (): void => {
				return changeBy(1);
			},
			decrement: () => {
				return changeBy(-1);
			},
			value: () => {
				console.log(count);
				return count;
			},
		};
	})();

	return <div></div>;
};
export default closure1PrivateMethod;

 

상태유지

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용 할 수 있기에 이러한 특성을 이용하여 특정 데이터를 스코프 안에 두고 계속 최신 상태로 유지하여 사용함

즉, 현재 상태를 기억하고 있다가 상태가 변경되면 그것을 최신 상태로 유지하는 기능으로 사용함

React내에서는 상태로관리로 사용되는 useState가 이를 의미

 

import { useState } from 'react';

const closure2React = () => {
	const [count, setCount] = useState(0);

	const onClickBtnHandler = () => {
		setCount(count + 1);
	};

	return (
		<div>
			<div>
				<button type='button' onClick={onClickBtnHandler}>
					클로저 테스트
				</button>
			</div>
			<div>
				<input type='text' value={count} />
			</div>
		</div>
	);
};
export default closure2React;

 

전역 변수의 사용 억제 (모듈화 유리)

클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있음

함수의 재사용성을 극대화하고 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고 함

클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리함

 

import { useEffect } from 'react';

const closure3Modlues = () => {
	useEffect(() => {
		counter.increment();
		counter.increment();
		counter.increment();
		console.log(counter.value()); // 3
		counter.decrement();
		counter.decrement();
		counter.decrement();
		console.log(counter.value()); // 0
	}, []);

	const counter = (() => {
		let count = 0;

		return {
			increment: () => {
				return (count += 1);
			},
			decrement: () => {
				return (count -= 1);
			},
			value: () => {
				return count;
			},
		};
	})();

	return (
		<></>
	);
};

export default closure3Modlues;