React 입문 | React 기본적인 구조 | React을 구성하는 3개 파일


React 응용 프로그램에는 기본적으로 일부 파일이 생성되어 있다.

React를 구성하는 3 개의 파일

그 중에는 응용 프로그램 본체를 구성하는 파일은 3가지가 있다. 그 역할을 설명한다.

index.js

src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.

App.js

src 폴더에 있다. 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

index.html

public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다.

빌드 및 구성이 바뀐다!

주의할 점은 이것들은 Node.js 응용 프로그램으로 동작하는 경우의 구성이라는 점이다. 서버에 Node.js가 있어서 그대로 기동하는 것이라면 이대로도 괜찮지만, 보통의 Web 서버에 올려서 사용하는 경우 액세스하면 index.js가 읽어와서 렌더링되는 방법은 좀 무리일 것이다.

이런 경우는 앞전에 설명한 바와 같이 npm run build 응용 프로그램을 빌드한다. 이렇게 하면 폴더의 구성이 달라진다. 폴더의 루트에 index.html이 새로 생성하고, 그 안에 index.js에 해당하는 스크립트가 실행된 표시를 만들 수 있게 된다.

실제로 해보면 알겠지만, index.html는 몰라도 거기에서 호출되는 스크립트는 빌드 시에 새롭게 생성되고, 코드 자체가 전혀 다르게 되어 있다. 자동 생성되어서 인지 줄바꿈도 되지 않아서, 사람이 읽기에는 어렵다. 즉, 빌드하여 생성된 것은 더 이상 “사람이 편집 할 것"으로 생각하지 않는다는 것이다. 일반 프로그래밍 언어는 소스 코드를 컴파일하면 바이트 코드를 생성하지만, 그것에 가까운 것으로 생각하면 될 것이다.

따라서, 우리가 프로그래밍하는 것은 어디까지나(빌드하기 전) index.js 나 App.js 이다. 수정하는 경우에도 이를 편집하고 다시 빌드하여 생성된 것을 배포할 수 있다. 지금까지의 “HTML 및 JavaScript는 작성한 것이 그대로 서버에 업로드 되어, 브라우저에 로드되어 동작한다"라는 상식은 버려야 한다.

React에는 “개발시 쓰는 코드"와 “실제로 배포되는 코드"는 전혀 다르다. React는 컴파일러 언어로 개발하는 것과 같은 느낌으로 만들 필요가 있다.

(※ 단, Node.js 그 자체가 서버에 있고, Node.js 응용 프로그램으로 실행한다면, 이야기는 별도이다. 이 경우는 이른바 인터프리터가 서버에 있고 컴파일하지 않아도 동작하는 것처럼 상황이라고 생각해도 좋다)