리액트에서는 호이스팅이 다른이유?

리액트에서 화살표 함수나 const를 사용하여 컴포넌트를 정의하더라도, 그 컴포넌트는 상위 코드에서 참조가 가능한 것으로 보입니다. 이는 자바스크립트 호이스팅(hoisting)과는 다른 개념입니다. 호이스팅은 var로 선언된 변수나 함수 선언식을 프로그램 실행 전에 미리 메모리에 할당하는 것을 의미합니다. 그러나 리액트의 컴포넌트와 같은 함수 표현식은 호이스팅 대상이 아니며, let, const도 마찬가지입니다. 그럼에도 불구하고 리액트에서 함수형 컴포넌트가 상위 코드에서 참조 가능한 이유는 웹팩(webpack)이나 바벨(babel)과 같은 모듈 번들러(module bundler) 덕분입니다. 이런 도구들은 import와 export 구문을 해석하고, 모듈 간의 의존성(dependency)를 파악하여 모든 소스 파일을 하나 또는 여러 개의 번들(bundle)로 합치는 역할을 합니다. 따라서, 리액트 앱에서 상위 코드가 하위 코드를 참조할 수 있는 것은 사실상 "코드 실행 순서"와 관련 있지 않습니다. 왜냐하면 모듈 번들러가 전체 프로젝트의 코드를 독립적으로, 그리고 상호 참조가 가능하게 변환하기 때문입니다. 이는 웹 개발에서 자주 사용하는 패턴인데, 다른 파일에서 export된 함수나 컴포넌트를 import하여 사용하는 것이 일반적이기 때문입니다.