분류 Reactjs

React강좌 - 7 - React을 사용하는 방법

컨텐츠 정보

  • 조회 430 (작성일 )

본문

우리가 React의 특성에 대해 더 많이 배우기 전에 React를 사용할 수 있는 모든 방법에 대해 이야기하는 것이 중요합니다.


이렇게 하면 React가 어떤 프로젝트에 추가 될 수 있는지 알 수 있는 좋은 정신적 개요를 얻을 수 있습니다. 요약하면 다음과 같습니다.


React은 다음에 의해 사용될 수 있습니다 :

  • 기존 사이트에 React 추가하기
  • React를 사용하여 완전히 단일 페이지 앱 만들기

기존 사이트와 단일 페이지 앱 (SPA)의 차이점에 대해 이야기 해 보겠습니다. React는 두 시나리오에 모두 적합합니다. 

그것은 크거나 작은 프로젝트를 기반으로 확장 할 수 있는 능력이 주된 이유 중 하나입니다. 너무 많은 사람들이 사랑합니다.


기존 사이트에 React 추가 


이미 웹 사이트를 보유하고 있고 React를 추가하려는 경우 두 단계 프로세스입니다. 일반적으로 서버 측 언어 (PHP, Ruby, Node)와 함께 제공되는 웹 사이트를 갖게 됩니다. 즉, 서버에서 보기를 생성하고 단락, 헤더, 제목과 같은 콘텐츠가 있는 HTML 파일이 사용자에게 제공됩니다.


그것은 PHP / Laravel에 의해 생성되며 사용자에게 HTML / CSS를 제공합니다. 페이지를 게재 한 후 React를 사이트의 일부 (예 : 상단 탐색 막대, 검색 섹션 및 기타 몇 가지 항목)에 추가합니다.


다음과 같이 보일 수 있습니다.


trnvovzcklpmydlipfvl.jpg 


React를 기존 사이트에 추가하는 과정은 다음과 같습니다.

  1. React 및 ReactDOM 라이브러리 추가
  2. Babel을 사용하여 브라우저가 React 코드를 이해할 수 있도록 하십시오.

첫 번째 단계는 빠른 부분입니다. 두 번째 단계는 보유한 프로젝트를 기반으로 까다로워 질 수 있는 단계입니다.


웹 사이트 구축 방법에는 많은 변형이 있으므로 현재 사이트를 보고 이미 빌드 시스템 (예 : Gulp, webpack 또는 이와 유사한 것)이 있는지 확인해야 합니다.


이 코드는 어떻게 생겼습니까? 


우리는 웹 사이트를 서버 측 언어로 제공 한 다음 JavaScript를 맨 위에 붙이게 됩니다. HTML 페이지를 보여주는 몇 가지 코드가 있습니다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <nav>
    <!-- navigation goes here -->
  </nav>

  <main>
    <!-- content goes here -->
  </main>

  <aside>
    <!-- sidebar is here -->
    sidebar stuff

    <!-- react will be injected in this div -->
    <div id="react-component-here"></div>
  </aside>

    <!-- javascript stuff here -->
    <!-- built with webpack/babel. contains react code -->
    <script src="app.js"></script>
</body>
</html>

우리는 사용자에게 완전한 HTML 페이지를 제공하고 여기에 react-component라는 ID로 레이블이 지정된 div가 있음을 알게 됩니다. 그런 다음 JavaScript (webpack 및 Babel과 함께 제공됨)를 추가 할 수 있습니다. 그 코드는 다음과 같이 보일 수 있습니다.


import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>look i am a react thing!</div>,
    document.getElementById('react-component-here')
);

이제 React가 우리 사이트의 특정 영역을 인수했습니다. 소스 코드를 보면 동일한 접근 방식을 취하는 div가 몇 개 있다는 것을 알 수 있습니다. <div id = "react-search-bar"> </ div>는 헤더 검색 창을 처리합니다.


React를 기존 사이트에 추가하는 것 외에도 React를 사용하여 전체 사이트를 구축 할 수 있습니다. 이를 단일 페이지 앱이라고 합니다.


Single Page Apps 


단일 페이지 응용 프로그램은 JavaScript로 완벽하게 구축 된 응용 프로그램입니다. SPA와 서버에서 제공되는 애플리케이션의 주요 차이점은 라우팅입니다. 서버 제공 사이트의 경우 클릭한 모든 페이지에 새로 고침이 표시됩니다. 브라우저가 서버에서 새 콘텐츠를 얻어야 하기 때문입니다.


gwk8j4jmpbbjtojlhf9y.jpg 


Single Page Apps의 경우 JavaScript (이 경우 React)가 새 데이터를 가져와 표시 할 책임이 있으므로 새로 고침을 볼 수 없습니다. 라우팅은 페이지 새로 고침 없이 브라우저에서 JavaScript를 통해 모두 처리됩니다.


인기 있는 단일 페이지 앱은 다음과 같습니다.

  • Facebook 
  • Medium 
  • Twitter 
  • Instagram 
  • Uber 
  • Airbnb


SPA가 웹 개발에서 점차 대중화됨에 따라 단일 페이지 응용 프로그램이 이 시작 과정의 초점입니다.


React Single Page Apps의 이점 


단일 페이지 응용 프로그램의 큰 장점은 보다 나은 사용자 환경을 제공한다는 것입니다. 사용자에게 즉각적인 피드백을 제공합니다.

  • 라우팅이 빠르며 페이지 새로 고침이 필요하지 않습니다.
  • 상호 작용이 빠르게 발생합니다 (실시간).
  • 오프라인 및 앱과 유사한 동작을 추가 할 수 있습니다.
  • 엄청나게 빠릅니다. 전역 및 정적으로 서비스 가능

물론 위의 두 가지 이점을 서버 렌더링 응용 프로그램에 추가 할 수 있습니다. 모든 응용 프로그램이 서버 쪽 + 클라이언트 쪽인 사이트 대신 클라이언트 쪽에서 빌드되는 경우 더 빠른 프로세스입니다.


무엇과 같습니까?


우리는 여전히 사용자에게 HTML 파일을 제공하고 있지만 이 경우 매우 적습니다. 다음과 같이 보일 것입니다 :


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>

  <script src="app.js"></script>

</body>
</html>

우리는 하나의 div라는 app만 가지고 있습니다. 전체 React 앱이 여기에 주입 되어 전체 페이지를 차지합니다. 

서버 렌더링 응용 프로그램에 대한 위 예제와는 달리, 우리는 우리의 로직이 부분적으로 HTML과 JS가 아닌 app.js 내부에서 일어난다.


결론


우리는 단일 페이지 앱 방식에 중점을 둘 것입니다. 다가오는 예제에서 우리는 React 개발을 보다 쉽게 하기 위해 몇 가지 도구를 사용하고 React 단일 페이지 응용 프로그램을 매우 쉽게 생성 할 수 있도록 Facebook이 발표 한 도구인 create-react-app를 사용할 것입니다.




React