[React] Component 외부 vs 내부 변수 선언

Component 외부 vs 내부 변수 선언

React를 사용하다 문득 Component 외부에서 변수 나 함수를 선언하는 것과 내부에서 선언하는 것의 차이가 궁금해져서 구글링을 하게되었다.

 

결론적으로 크게 차이는 없고 컴포넌트 내부코드의 가독성을 개선하고 싶거나,

특정 함수의 재사용성을 높이고 싶으면 외부로 빼는게 낫다고 한다.

https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component

Functional Component: Write functions inside or outside the component?

 

컴포넌트 외부 let 사용 ?

하지만 검색을 하다 컴포넌트 외부에서 let은 절대 사용하지 말아야 한다는 것을 알게 되었다.

(당연하게 그러고 있었지만 이유는 딱 정의할 수 없었다.)

이유는 컴포넌트를 import 해서 사용할 때, return 영역에서 해당 컴포넌트의 hook function 만 반복 실행하는 거고, 컴포넌트 위에 선언한 변수들은 import 할 때 한번만 scan되기 때문에 호출한 컴포넌트 hook은 각각의 컨텍스트를 가지니까 hook 내부 변수는 그 hook에서만 유효한데 반해,

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

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