리액트 이전으로 돌아가는거야 ~ ^^
js 파일을 불러오기 위해서 Html의 head태그 내부나 body태그 최하단에서 script 태그의 src 속성을 이용해 자바스크립트 파일을 명시해주어야 한다.
<!DOCTYPE html>
<html>
<head>
//요기도 불러올 수 있음
</head>
<body>
<script src="a.js"></script>
</body>
</html>
만일 다른 파일을 불러오고 싶다면 export,import를 사용해야한다. 하지만 우리는 다른 파일을 불러오기 위해 export,import를 쓰기 위해선 script 태그에 type=”module” 이란 속성을 추가로 같이 써주어야 한다.
//변경사항 적용
<!DOCTYPE html>
<html>
<head>
//요기도 불러올 수 있음
</head>
<body>
<script src="a.js" type="module"></script>
</body>
</html>
하지만 리액트로 빌드한 프로젝트에 들어가서 확인해보면 import,export를 할 수 있음에도 불구하고 script태그에 type=”module”이 쓰여있지 않는 것을 볼 수 있다. 리액트는 어떻게 type attribute를 명시하지 않고도 import,export를 할 수 있었던 걸까?
그 답은 package.json에 있다. dependencies는 이 프로젝트에 설치된 라이브러리들을 볼 수가 있는데 “react-scripts”가 그 해답이다.
react-scripts 는 코드를 변환해주는 다양한 툴을 가지고 있는데, 그 기능 중 하나가 script 태그를 html 파일안에 주입해주는 것이다. 컴파일러는 브라우저에 소스코드를 전달하기전에 개발서버가 우리의 html코드를 보고 코드를 변환해서 브라우저에 로드해준다. 그래서 굳이 type=”module”을 명시하지 않아도 우리의 react-scripts 는 컴파일러를 통해 type=”module”을 쓰지 않더라도 import,export를 가능하게 해준다.
<aside> 💡 **이걸 왜 변환해..?
JSX가 아니기 때문이다. →리액트에서는 js 파일안에서 html 코드를 쓰는 JSX문법을 사용하지만 javascript 에서는 사용할 수 없기 때문에 변화해주는 것이다.**
</aside>