[React] 컴포넌트 외부에서 하면 안되는 것

 

리액트에서 절대 하면 안되는 것이 하나 있다.

 

컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다.

 

컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만,

컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수를 공유하게 될 수 있다.

 

컴포넌트를 import 해서 사용할 때, return 영역에서 해당 컴포넌트의 hook function 만 반복 실행하는 거고,

컴포넌트 위에 선언한 변수들은 import 할 때 한번만 scan되기 때문에 호출한 컴포넌트 hook은

각각의 컨텍스트를 가지니까 hook 내부 변수는 그 hook에서만 유효한데 반해,

컴포넌트 바깥에 선언한 변수는 해당 파일 내에서 전역 컨텍스트와 비슷하게 정의 된다.

각각의 hook 들에서 해당 변수명을 호출할 때, 내부에 호출한 변수가 없으면 전역 컨텍스트까지 스코프 체인 따라 올라간다. 그래서 let 키워드로 hook 외부에서 선언하면 동일한 변수를 참조해서 문제가 생길 수 있기 때문이다.

 

const 는 애초에 수정될 수도 없을 뿐더러, 고정된 값이라 전역으로 사용해도 보통 전혀 문제가 없기 때문이다.