렉시컬환경과 클로저, 그리고 React에서 이전 state를 기억하는 방식

렉시컬환경

렉시컬환경은 실행중인 함수와 코드블록을 포함하는 검색범위인데, 쉽게 이해하려면 코드블록과 연관지어 이해하는 것이 편하다.

 

변수에 접근할 땐, 내부 렉시컬 환경 -> 외부 렉시컬 환경 -> 외부 2 렉시컬 -> 전역 렉시컬 환경으로 검색범위를 확장한다.

 

아니면 그냥 스크린샷이라고 생각하자.

 

리액트 함수 컴포넌트에서의 렉시컬환경과 클로저

클로저

클로저는 '내부함수가 자신이 선언되었을때의 환경을 기억하는 성질' 라는 글도 있고,

클로저는 '외부 변수를 기억하고 이 외부 젼수에 접근할 수 있는 함수' 라는 글도 있다.

 

어쨌든, new Function으로 만든 함수를 제외한 모든 JS의 함수는 클로저이다 .

 

함수는 호출 할 때마다, 새로운 렉시컬 환경이 생성되고 외부 변수는 마지막 접근했던 당시의 렉시컬 환경에 저장된다.(스크린샷이 찍힌다)

함수 컴포넌트

함수 컴포넌트도 클로저이다.

함수를 재호출하면 useState도 새롭게 생성되고 이전 state는 과거의 렉시컬 환경이 된다.

// ex
const React = (function () {
  let _val

  // 내부함수인 useState에서 외부함수인 _val에 접근
  function useState(initVal) {
    const state = _val || initVal
    const setState = (newVal) => {
      _val = newVal
    }

    return [state, setState]
  }
}

 

그리고 과거의 렉시컬 환경에 저장된 이전 state와 현재의 state를 비교하여, 변화가 있으면 DOM을 업데이트 한다.

 

이러한 성질을 이용해서 이전 state를 기억하거나 useEffect에서 dependency에 따른 state추적을 할 수 있는 것이다.