[React error] TDZ가 뭔데? 변수 위치 에러

 

JavaScript 에서 변수를 선언할 때 코드의 위치를 고려하지 않으면 에러가 발생한다.

 

react 강의를 듣고

 

해당 강의에서 코드를 어것저것 고치던 도중에 갑자기 에러가 발생했다.

 

여기서 지목하는 detail.js 16번째 줄은

count 이놈이었는데 왜 갑자기 에러가 발생했을까?

 

useEffect를 배우던 도중 dependency에 변수를 넣고 해당 변수를 변화시켜서 useEffect가 발생하는 것을

 

보고 싶었을 뿐이다.. 그런데 왜 ??

 

Javascript의 Es6에 추가된 let 과 const는 

 

선언 전에 해당 변수(count)를 사용하면 

이렇게 에러가 뜬다.

 

(출처 : https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/)

즉 선언 전인 const 나 let 변수를 먼저 사용하면 TMZ에 해당하는 것이다.

 

const와 let 외에도 class구문등 여러가지 비슷한 경우가 있는데 아래의 블로그를 읽어보면 좋을듯 싶다. 

 

이 글 볼때마다 아래 블로그 들어가서 꼭 읽어봐라 정리 잘해두셨음.

 

출처:TDZ을 모른 채 자바스크립트 변수를 사용하지 말라 | TOAST UI :: Make Your Web Delicious!

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

 

 

 

위 블로그에서 나온 얘기중에

 

var / function / import 부분은 인상깊었다.

 

다 현재 스코프에서 호이스팅이 되는 애들이라서 TMZ 오류가 나타나지 않는다.

 

var 를 이용해서 변수를 선언하기 전에 변수를 먼저 사용하면 그냥 undefined 라고 나오고 에러는 안난다.

 

function의 경우 최상단으로 호이스팅되어 선언 전에 함수를 사용해도 정상작동한다.

 

import 부분은 듣고 놀라웠는데 import 위에 import한 값을 먼저 써도 오류가 발생하지 않는다. 함수와 같은 이유.