React 애플리케이션은 기존 자바스크립트와 다른 독특한 구조로 이루어져 있습니다. 이는 react-app 내의 index.html파일의 구조를 보면 알 수 있습니다.
React 애플리케이션의 기본 구조
index.html의 역할과 구성
React 프로젝트에서 index.html은 애플리케이션의 진입점입니다. 이 파일은 매우 간단하게 유지되며, 주로 단일 div 태그를 사용합니다. 이 index.html은 리액트가 동적으로 모든 UI 컴포넌트를 렌더링하는 장소예요. 파일의 나머지 부분은 기본적으로 비어 있으며, 리액트 및 기타 자바스크립트 파일은 빌드 과정을 거쳐 이 곳에서 결합합니다.
React 애플리케이션에서 HTML 파일의 사용 방식
전통적인 웹 애플리케이션과는 달리, 리액트의 html 파일은 주로 정적인 연결점 역할을 할 뿐이며 실제 복잡한 로직과 상태 관리는 자바스크립트가 담당합니다. 이 구조 덕분에 개발자들은 애플리케이션의 상태를 보다 효율적으로 관리하고 동적인 사용자 인터페이스를 쉽게 구현할 수 있습니다.
index.html에서 스크립트 태그의 부재 이유
전통적인 HTML과 자바스크립트 통합과의 차이점
리액트에서는 전통적인 방식의 <script> 태그를 index.html 파일에서 직접 찾아볼 수 없습니다. 아래 코드는 react-app의 public/index.html에서 볼 수 있는 코드입니다. 여기에는 <script> 태그가 없습니다. 그리고 <body>에는 사용자가 브라우저에서 자바스크립트를 비활성화 했을 때를 대비한 대체 메시지를 보여주는 no-script 태그만 있습니다.
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
전통적인 웹 애플리케이션에서 HTML과 자바스크립트는 서로 밀접하게 연결되어 사용됩니다. 개발자들은 HTML 문서 내부에 직접 <script> 태그를 배치하여 자바스크립트 코드를 포함시키고 실행합니다. 이 방식은 스크립트가 페이지 로딩 중에 브라우저에 의해 해석되고 실행되기 때문에 페이지의 로딩 속도에 직접적인 영향을 미칩니다.
반면, React 애플리케이션에서는 이러한 스크립트 태그들이 직접적으로 보이지 않는 이유는, 리액트는 빌드 과정을 통해 자바스크립트와 의존성들을 하나의 최적화된 파일로 결합하여 필요한 스크립트를 HTML에 자동으로 삽입하기 때문입니다. 이 접근 방식은 초기 로드 시간을 줄이고, 네트워크 요청의 수를 최소화하여 전체적인 성능을 향상시킵니다.
리액트의 가상 DOM과 클라이언트 사이드 렌더링
리액트는 가상DOM을 사용합니다. 가상 DOM은 실제 DOM의 경량 버전으로, 변화가 일어날 때마다 전체 UI를 다시 렌더링하지 않고 변화가 필요한 부분만 실제 DOM에 효율적으로 반영합니다. 이 방식은 데이터의 변화가 UI에 빠르게 반영되도록 도와주며, 사용자 경험을 크게 향상시킵니다.
클라이언트 사이드 렌더링을 사용함으로써, 모든 렌더링 프로세스가 사용자의 브라우저 내에서 이루어지고, 서버는 단지 정적 파일들을 제공하는 역할만 하게 됩니다. 이 구조는 서버의 부하를 줄이고, 응답 시간을 개선하여 더욱 빠른 인터랙티브 경험을 제공할 수 있게 합니다.
빌드 과정과 자바스크립트 변환
리액트의 빌드 과정은 자바스크립트 코드를 브라우저에서 실행할 수 있는 형태로 변환하는 핵심 단계입니다. 이 과정에서 원래의 코드가 압축되고 최적화되어 네트워크를 통해 전송되는 데이터 양이 감소합니다. 또한, 최신 자바스크립트(ECMAScript 6 이상)를 지원하지 않는 브라우저를 위해 ES5와 같은 이전 버전의 자바스크립트로 코드를 트랜스파일합니다.
이는 모든 사용자가 동일한 기능과 성능을 경험할 수 있도록 보장합니다. 빌드 과정은 개발 중인 소스 코드를 실제 사용자에게 배포될 최종 코드로 변환하는 데 필수적이며, 이 과정 없이는 현대 웹 애플리케이션의 복잡성과 요구 사항을 충족시킬 수 없습니다.
결론
결론적으로, 리액트에서 index.html에 스크립트 태그가 포함되지 않는 이유는 가상 DOM과 빌드 프로세스의 특성 때문입니다. 위에서 언급했듯 리액트는 빌드 시 자바스크립트 코드와 의존성들을 하나의 최적화된 파일로 결합하여 불필요한 스크립트 로드(웹 페이지가 로드될 때 웹 브라우저가 자바스크립트 파일을 다운로드하고 실행하는 과정)를 제거하고 웹 페이지의 초기 로드 시간을 최소화하여 성능을 향상시킵니다.
가상 DOM은 실제 DOM의 전체 렌더링 대신 필요한 부분만 업데이트함으로써, 더 빠르고 효율적인 UI 업데이트를 가능하게 합니다. 이러한 기술적 접근 방식은 클라이언트 사이드에서 모든 렌더링이 처리되도록 하여 서버의 부하를 줄이고 전반적인 응답성을 개선합니다. 따라서, React 애플리케이션은 index.html 내에서 직접적으로 스크립트 태그를 사용할 필요가 없게 되는 것입니다.
'개발 이야기 > frontend' 카테고리의 다른 글
| Electron에서 React의 특정 페이지를 로드하는 방법 (0) | 2024.08.06 |
|---|---|
| 리액트에서 커스텀 훅을 사용해야 하는 이유 (0) | 2024.04.19 |
| [redux]리덕스 초기 세팅 및 폴더구조 생성 (0) | 2024.01.22 |
| 외부 컴포넌트 스타일을 해당 페이지에서 적용하기 위해 className을 넘겨주기 (0) | 2023.11.07 |
| react에서 css module로 다른 클래스와의 스타일이 충돌되는 것 방지하기 (0) | 2023.11.06 |
댓글