[React] 컴포넌트 외부에 변수 선언과 컴포넌트 내부에 변수 선언 간 차이

동작방식으로 보면, 컴포넌트 내부 변수는 리렌더링이 발생할 때 마다 다시 선언된다.

반면, 외부 변수는 import 시에만 한번 선언된다.

따라서, 외부에서 가져와도 상관없는 함수나 변수(대부분은 재사용을 하기 위한 것들)는 컴포넌트 외부에 선언해도 상관없다. 단, 주의할 사항이 있다.

동일한 컴포넌트를 여러 번 사용할 때다.

 

만약 모듈에서 컴포넌트 외부에 변수를 선언하고 해당 컴포넌트를 여러번 사용하면, 이 변수가 공유되면서 문제가 생길 수 있다.

 

 

참고 글

https://jake-seo-dev.tistory.com/250