클로저와 useState

 

오늘은 헷갈리는 개념인 클로저에 대해 정리해봤다.

 

---

 

 

클로저는 함수가 자신이 생성된 환경을 기억하는 특성이다.

즉, 함수 안에서 선언된 변수들을 함수가 실행될 때마다 사용할 수 있게 만들어준다.

 

여기서 inner함수는 outer함수 내부에 정의되어 있다.

이때 inner함수는 자신이 생성된 스코프, 즉 outer을 기억하고, outer함수의 호출이 완료된 이후에도 그 스코프에 접근할 수 있다.

 

아래 코드에서 outer에 10이 할당되며 inner를 반환한다. 이후 outer 함수는 종료한다.

inner를 할당받은 fn에 5를 할당하면 inner(5)를 실행한다.

inner에는 매개변수 x가 존재하지 않지만, 자신이 생성된 환경을 기억해 outer의 x를 사용할 수 있게 된다.

function outer(x) {
    function inner(y) {
        return x + y; // inner는 outer의 x를 기억
    }
    return inner;
}

const fn = outer(10); // outer 실행 -> inner 반환 -> fn은 inner를 참조
console.log(fn(5));   // inner(5) 호출 -> x = 10, y = 5 -> 10 + 5 = 15

간단하게 정리

• fn은 inner 함수 자체를 참조한다.
• fn(5)를 호출하면 inner(5)가 실행된다.
• inner는 outer가 반환될 때 클로저를 통해 outer의 스코프에 접근할 수 있기 때문에 x를 기억하고 있다.

 

자바스크립트 - 클로저 문제

https://leetcode.com/problems/counter/editorial/?envType=study-plan-v2&envId=30-days-of-javascript

 

 

useState에서 클로저는 어떤식으로 사용되었을까?

리액트의 useState훅은 내부적으로 클로저를 사용하여 상태를 관리한다.

useState를 아주 간단하게 구현해봤다.

function useState(initialValue) {
  let storedValue = initialValue;

  const getState = () => {
    return storedValue;
  };

  const setState = (newValue) => {
    storedValue = newValue;
  };

  return [getState, setState];
}

1. getState: 현재 상태 값을 반환
2. setState: 상태 값 업데이트

 

 

 

리액트에서 useState 사용 예시

const [count, setCount] = useState(0)

count는 초기값으로 0을 가지게 된다. 그리고 setCount를 통해 상태를 변경할 수 있다.

 

1. 초기 값 할당: useState(0)이 실행되면, storedValue는 0으로 초기화 된다.
2. 상태 값 변경: 만약 setCount(1)을 실행하면, storedValue가 1로 변경된다. 이때 getState를 호출하면, 변경된 상태인 1을 반환한다.

 

 

 

클로저의 역할

위 코드에서 상태는 storedValue라는 변수에 저장된다. 이 변수는 useState함수가 실행될 때 마다 고유하게 생성되며, 그 값을 getState와 setState 함수가 기억한다.

• 외부에서 직접 storedValue에 접근할 수 없다.
• getState와 setState는 useState함수의 실행 컨텍스트를 기억하는 클로저이므로, storedValue에 접근하고 수정할 수 있게 된다.
• 따라서, 상태 값은 함수 외부에서 직접 수정할 수 없고, setState를 통해서만 변경가능하다.

 

 

 

자바스크립트의 Deep Dive 책에서는 클로저에 대해 다음과 같이 설명한다.

 

“클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 이는 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.”

 

리액트에서 useState 훅은 클로저를 사용해 상태를 관리한다.

클로저를 통해 상태 값을 setState로만 변경할 수 있게 되어 안전하게 유지되며, 상태 값은 외부에서 직접 수정할 수 없도록 관리되고 있다.