[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장

개발

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - SPA

jih0ssang 2024. 7. 23. 15:19

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가지 방식으로 생성할 수 있다.
1. 자바스크립트 함수
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;

자바스크립트 클래스 형태로 컴포넌트를 구현한 것이다.