[React.js, 스프링 부트, AWS로 배우는 웹 개발 101][프론트엔트 개발] - React.js(브라우저 동작방식 2)

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다.

---

목차
1. React.js
2. React 컴포넌트

---

1. React.js

spa

• 리액트, 앵글러, 뷰는 대중적 SPA 라이브러리/프레임워크다. SPA는 싱글 페이지 애플리케이션의 약자로 한 번 웹페이지를 로딩하면 사용자가 임의로 새로 고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다.
• spa의 경우 서버에게 새 HTML을 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 싱글 페이지 애플리케이션이라고 하며 이 렌더링 과정을 클라이언트-사이드 렌더링이라고 한다.

render()

• 함수가 동적으로 HTML 엘리먼트를 우리 눈에 보이는 리액트 첫 화면으로 바꿔주는 것이다.
• 페이지를 바꾸고 싶다면 root의 하위 엘리먼트를 다른 HTML로 수정함으로써 가능해진다.
• fetch, ajax 등의 함수로 서버에 데이터를 요청하고 받은 데이터를 이용해 자바스크립트 내에서 HTML을 재구성한다.

2. React 컴포넌트

컴포넌트는 다른 컴포넌트 안에서 사용이 가능하고 컴포넌트는 자바스크립트 함수 또는 자바스크립트 클래스 형태로 생성할 수 있다.

JSX

자바스크립트와 HTML 코드를 함께 사용하는 문법을 의미하고 Babel 라이브러리가 빌드 시 JSX 문법을 자바스크립트 문법으로 번역해주는 역할을 한다.

클래스 버전 컴포넌트

import React from "react";
import "./App.css";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        //jsx code
      </div>
    );
  }
}

export default App;

App 컴포넌트 사용법

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App /> //App Component 사용법
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

1. import를 이용해 App 컴포넌트를 불러온다.
2. <컴포넌트명 />을 이용해 컴포넌트를 사용한다.