지역 변수 vs 전역 변수 (feat. React Hook)

졸업작품을 만들던 중 나를 미로에 빠트리게한 부분이 있었다.

요점인 코드를 간단하게 바꿔 적자면

const App()=>{
  
  useEffect(()=>{
    const test_var=10
  },[]);
  return(
    <>
      {test_var}
    </>
  )
}

이 코드의 에러는 아래와 같이 뜬다.

return 안에 test_var은 컴포넌트에서 선언되지 않았다. 이유가 무엇일까?

지역변수와 전역변수

이 두 변수는 메모리에 존재하는 시간과 변수에 접근할 수 있는 범위의 차이가 존재한다.

지역 변수(local variable) : '블록' 내에서 선언된 변수

지역 변수는 변수가 선언된 블록{} 내에서만 유효하며, 블록이 종료되면 메모리에서 사라진다.

이러한 지역 변수는 메모리상의 스택(stack) 영역에 저장되며, 초기화하지 않으면 의미 없는 값(쓰레기값)으로 초기화된다.

예시로 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수로 취급됩니다.

전역 변수(global variable) : 함수의 외부에서 선언된 변수

전역 변수는 프로그램의 어디에서나 접근할 수 있으며, 프로그램이 종료되어야만 메모리에서 사라진다.

이러한 전역 변수는 메모리상의 데이터(data) 영역에 저장되며, 직접 초기화하지 않아도 0으로 자동 초기화된다.

그럼 다 전역변수로 쓰면 되지 않나 싶지만 메모리 낭비가 있기때문에 전역변수 사용을 줄이는 것이 좋다.

ES6에서의 변수

ECMAScript 6에서 변수 선언 방법이 새롭게 바뀌었는데,

let : 변경 가능한 지역 변수 선언
const : 변경 불가능한(상수) 지역변수 선언
var : 전체 범위를 갖는 유연한 변수 선언

let과 const와 달리 var로 선언한 변수의 접근 범위는 함수 안 이거나 전역이다. 블록을 기준으로 스코프가 생기지 않고 function 단위의 스코프를 갖는다는 것이다.

해결 방법은...?

그렇다면 var을 사용하면 해결이 가능할까?
먼저 useEffect 훅에 대해 간단하게 알아보자.

React HOOK 중 하나로 함수 컴포넌트에서 콜백함수의 실행 시점을 정한다.
실행 시점은 랜더링 이후이거나, 변수의 값 변경 등으로 설정 가능하다.

위 코드는 실행 시점인 Dependency를 빈 배열로 지정하여 컴포넌트 랜더링 후 단 한번만 실행한다.

각설하고 중요한것은 함수인지 useEffect 내부에 변수를 선언하면 밖에서 쓸수 있는지이다.

첫번째 Hook은 당연하게도 함수이다. 공식 문서에도 나와있고 형태에서도 알수 있듯이 useEffect는 함수이다.

또한 var은 함수 단위의 스코프를 갖기때문에 useEffect 내부에서 선언하여도 함수 밖에서는 사용할 수 없다.

그렇다면 외부에서 var로 선언한 다음 함수에서 사용하면 되지 않을까?

따라~ 이런 에러가 뜬다. 해석 하자면 useEffect 안에 할당된 변수는 각 렌더 이후에 값을 잃을 것이다. useRef를 사용해서 값을 저장해라 이것이다.

아니면 useState를 사용해서 값 변경을 저장해도 될것 같다.