React 의 클로저

한걸음 클로저~to you 

 

우선 클로저란?

 함수와 함수가 선언된 어휘적 환경의 조합

 

클로저는 주변 상태(렉시컬 환경)에 대한 참조와 함께 번들로 묶인(묶음) 기능의 조합인데 즉, 클로저를 사용하면 내부 함수에서 외부 함수의 범위에 접근할 수 있게 된다. 이 때, 클로저는 함수에 렉시컬 환경을 기억하게 되고 외부 범위에서도 접근이 가능하게 해준다.

 

여기서 렉시컬 스코프란?

자바스크립트 엔진에서는 함수가 호출되는 위치가 아닌 함수를 어디에 정의했는지에 따라 함수의 상위 스코프를 결정하게 된다. 그리고 이 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다.

 

function createWebFunc() {
  var team = "SOPT";
  
  function showTeam() { 
    alert(team);
  }
  
  return team;
}

var platform = "Web";
const myWebFunc = createWebFunc();
myWebFunc();

 

myWebFunc() 를 호출하면, SOPT라고 출력이 정상적으로 되는게 확인이 가능하고 showTeam() 함수는 createWebFunc() 스코프를 기억하게 된다.

 

** 클로저 활용 예시 !

1. 변수 counter에 직접 노출을 없애서 직접 수정 막음
2. 변수의 업데이트를 increase, decrease로만 제한해서 무분별한 변경 막음 (원하는 방향의 수정만 ㄱㄴ하게 함)

 

이 때, React 에서도 기존 Hooks 에서 클로저를 사용하고 있는데 이 Hook 사용 시, 의존성 배열을 주의해야한다!!

 

대표적인 React에서의 클로저! : useState

useState는 [상태, 상태를 변경하는 함수] 형태의 배열을 반환한다. 

const [state, setState] = useState(initialValue)

함수형 컴포넌트에서 이전 상태와 현 상태의 변경이 있는지를 감지하기 위해서는 함수가 실행되게 될 때 이전 상태에 대한 내용을 가지고 있어야 한다. React는 이 과정에서 클로저를 사용하게 된다!

 

클로저가 내부의 값을 기억하고 있기 때문에 이후에도 접근이 가능해진다.

 

이제 내부값을 변경하게 될때는 setState라는 지정된 함수로 받아오는 값으로 값을 업데이트한다. useState() 함수가 어디에서 실행되었건, 클로저를 통해 해당 값에 접근할 수 있게 된다. 이때, setState는 컴포넌트 내부에서 값을 변경시키는 것이 아니라, 외부에 있는 값을 변경시키게 되어서 상태가 변경된 직후 컴포넌트가 가진 값은 이전의 값을 그대로 참조하게 된다.

 

⚠️  각 컴포넌트의 상태 정보는 배열 형태로 저장되기 때문에 상태를 변화시키는 hook을 조건문이나 반복문 안에서 사용하면 잘못된 순서의 값을 참조하게 될 수 있으니 주의해야 한다.