SPA(Single Page Application)
한 번 웹 페이지를 로딩하면 사용자가 임의로 새로 고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션
파싱(parsing)
브라우저가 HTML, CSS, JavaScript 등의 소스 코드를 해석하는 과정
렌더링(rendering)
파싱된 웹 페이지를 화면에 실제로 표시하는 과정
[React.js로 알아보는 SPA 동작 원리]
1. index.html 렌더링
<body>
<div id="root"></div>
</body>
2. index.js 실행
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
3. root Element 아래에 React.js 가 생성한 HTML Element 추가
<!DOCTYPE html>
<html lang="en">
<head></head>
<body data-new-gr-c-s-loaded="9.36.0">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="App">
<header class="App-header">
<img src="/static/media/logo.6ce24c58.svg"
class="App-logo"
alt="logo">
<p> Edit
<code>src/App.js</code>
and save to reload. </p>
<a class="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer">Learn React</a>
</header>
</div>
<script src="/static/js/bundle.js"></script>
<script src="/static/js/vendors~main.chunk.js"></script>
<script src="/static/js/main.chunk.js"></script>
</body>
</html>
4. root Element 하위 Element 렌더링
# 위의 코드 중 일부
<script src="/static/js/bundle.js"></script>- 브라우저는 빈 화면에 index.html을 로딩하고 있다.
- HTML이 <body></body> 를 렌더링하다 보면 마지막에 bundle.js 스크립트를 로딩한다.
- bundle.js
- npm start 실행할 때 만들어진 스크립트
- index.js 포함하고 있음
- index.js의 일부로 ReactDom.render() 함수가 실행
- render() 함수가 동적으로 HTML Element를 우리 눈에 보이는 리액트 첫 화면으로 바꿔줌(렌더링)
- 렌더링된 하위 Element는 render() 함수의 매개변수로 들어가는 <App /> 부분이다.
브라우저의 자바스크립트 동작 원리
- 자바스크립트는 fetch, ajax 등의 함수로 서버에 데이터를 요청하고
- 받은 데이터를 이용해 자바스크립트 내에서 HTML을 재구성한다.
서버에게 새 HTML 페이지를 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션이 SPA이다.
이 렌더링 과정을 클라이언트-사이드 렌더링(Client-Side Rendering, CSR)이라고 한다.
React 컴포넌트
컴포넌트가 무엇인지 알아보자.
[App.js]
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload
</p>
<a
className="App-link"
href="<https://reactjs.org>"
target="_blank"
rel="noopener noreferrer"
>
Learn React
>/a>
</header>
</div>
);
}
export default App;- 컴포넌트는 App이다.
- 하단의 export default App을 통해 App이라는 컴포넌트를 다른 컴포넌트에서 사용할 수 있다.
- 컴포넌트 구현 방식은 다음 2가지 방식으로 생성할 수 있다.
- 자바스크립트 함수
- 자바스크립트 클래스
- App.js는 자바스크립트 함수로 컴포넌트를 구현한 것이다.
[App.js 클래스 버전]
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render() {
return (
<div className="App">
... // JSX Code
</div>
);
}
}
export default App;- 자바스크립트 클래스 형태로 컴포넌트를 구현한 것이다.
'개발' 카테고리의 다른 글
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - CORS (0) | 2024.07.23 |
|---|---|
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 브라우저의 동작 원리 (3) | 2024.07.23 |
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 리액트 애플리케이션 생성 (0) | 2024.07.23 |
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 퍼시스턴스 레이어 (0) | 2024.07.22 |
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 서비스 레이어 (0) | 2024.07.22 |