자바스크립트에서 함수 내 지역변수는 상태를 유지하지 않는다. 물론 전역변수를 이용하면 특정 상태를 프로그램 내에서 유지할 수 있지만, 이름이 충돌하거나, 메모리 누수 등 단점이 많으므로 필요한 경우에는 사용하지만 일반적으로는 사용을 최소화하고, 대신 모듈 패턴이나 클로저 등으로 변수의 스코프를 제한한다.

---

클로저(Closer)

클로저는 자바스크립트에서 주변 상태에 대한 참조와 함께 묶인 함수의 조합이다. 이는 함수가 정의될 때 스코프를 기억하고, 그 스코프 밖에서 함수가 호출되더라도 그 스코프에 접근할 수 있게 해준다.

클로저의 동작 방식

1. 함수 내부에 정의된 함수
   자바스크립트는 함수 내부에 다른 함수를 정의할 수 있다. 이 때 내부 함수는 외부 함수의 변수에 접근할 수 있다
2. 외부 함수 실행 후, 내부 함수가 외부 함수의 변수에 접근 가능
   외부 함수가 실행을 마쳐도 내부 함수가 여전히 외부 함수의 변수에 접근할 수 있는 상태를 클로저라고 한다.

const  myOuter = function () {

	let count = 0;

	const myInner = () => {
		count++;
		return count
	}

	return myInner;
}

const myInnerFn = myOuter();
console.log(myInnerFn()); //1
console.log(myInnerFn()); //2
console.log(myInnerFn()); //3
console.log(myInnerFn()); //4
console.log(myInnerFn()); //5

위 코드에서 myOuter는 myInner를 반환한다. myOuter가 실행된 후에도 반환된 myInner는 여전히 count에 접근할 수 있다. 이는 myInner가 count를 포함한 myOuter의 스코프를 기억하고 있기 때문이다. 이와 같이 myInner가 외부 함수의 변수에 접근할 수 있는 상태가 클로저이다.

---

클로저의 활용

• 데이터 은닉
• 상태 유지
• 부분 적용 함수

---

클로저의 장점과 단점

장점

• 코드 모듈화를 통해 가독성을 높이고 유지보수를 쉽게 할 수 있다.
• 변수 은닉을 통해 보안을 강화할 수 있다.

단점

• 잘못 사용하면 메모리 누수로 이어질 수 있다.
  크로저는 참조를 계속 유지하기 때문에 예상보다 많은 메모리를 차지할 수 있다.

---

크로저는 리액트js의 useState에서 활용되는 문법이다. 리액트와 같은 라이브러리를 추후 사용해야 하기 때문에 개념을 미리 잡아두었다.