AngularJS1.x 애플리케이션을 React로 마이그레이션(자세한 튜토리얼)

이 글에서는 주로 AngularJS1.x 애플리케이션을 React로 마이그레이션하는 방법을 소개하고 참고용으로 제공합니다.

Angular와 React는 모두 훌륭한 프레임워크/라이브러리입니다. Angular는 MVC(Model, View, Controller)의 정의 구조를 제공합니다. React는 상태 변경에 기반한 경량 렌더링 메커니즘을 제공합니다. 종종 개발자는 AngularJS에서 이전 애플리케이션을 사용한 후 ReactJS를 사용하여 새로운 기능을 구축하고 싶어합니다.

AngularJS 애플리케이션을 제거하더라도 처음부터 ReactJS 애플리케이션을 구축하는 것은 좋은 선택입니다. 그러나 대규모 애플리케이션의 경우에는 실현 가능한 솔루션이 아닙니다. 이 경우 별도의 React 구성요소를 구축하고 이를 Augular로 가져오는 것이 더 쉬울 것입니다.

이 기사에서는 React2angular를 사용하여 Angular 애플리케이션에서 React 구성 요소를 만드는 데 도움을 드리겠습니다.

목표 및 계획

우리가 할 일은 다음과 같습니다. —

Given: 도시 이름과 유명한 명소를 표시하는 Angular 앱.

목표: Angular 애플리케이션에 React 구성 요소를 추가합니다. React 구성 요소는 명소의 주요 사진을 표시합니다.

계획: React 컴포넌트를 생성하고, 이미지 URL을 전달하고, 이미지를 React 컴포넌트로 표시하겠습니다.

시작해 보세요!

0단계: Angular 앱 만들기

이 글의 목적에 맞게 Angular 앱을 단순하게 유지하세요. 나는 2018년에 유럽 여행을 계획하고 있으므로 내 Angular 앱은 본질적으로 내가 방문하고 싶은 목적지 목록입니다.

데이터세트 버킷리스트는 다음과 같습니다.

const bucketlist = [{
 city: 'Venice',
 position: 3,
 sites: ['Grand Canal', 'Bridge of Sighs', 'Piazza San Marco'],
 img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
 city: 'Paris',
 position: 2,
 sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'],
 img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
 city: 'Santorini',
 position: 1,
 sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
 img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];

angularComponent.js는 다음과 같습니다.

function AngularComponentCtrl() {
 var ctrl = this;
 ctrl.bucketlist = bucketlist; 
};
angular.module('demoApp').component('angularComponent', {
 templateUrl: 'angularComponent.html',
 controller: AngularComponentCtrl
});

angularComponent.html은 다음과 같습니다.

<p ng-repeat="item in $ctrl.bucketlist" ng-sort="item.position">
 <h2>{{item.city}}</h2>
 <p> I want to see <span ng-repeat="sight in item.sights">{{sight}}         </p></span>
</p>

매우 간단합니다! 이제 산토리니로 갈 시간입니다...

1단계: 종속성 설치

편집기가 구성되지 않은 경우 Angular에서 React로 마이그레이션하는 것이 어려울 수 있습니다. 먼저 Linting을 설치하겠습니다.

npm install --save eslint babel-eslint

다음으로, React2angular를 설치하세요. React를 설치한 적이 없다면, React, React-dom, Prop-types도 설치해야 합니다.

npm install --save react2angular react react-dom prop-types

2단계: React 구성 요소 만들기

이제 도시 이름을 렌더링하는 Angular 구성 요소가 생겼습니다. 다음으로 추천 이미지를 렌더링해야 합니다. 이 이미지가 props를 통해 우리에게 제공된다고 가정해 보겠습니다. React 구성 요소는 다음과 같습니다.

import {Component} from 'react';
class RenderImage extends Component {
 render() {
  const imageUrl = this.props.imageUrl;
  return (
   <p>
    <img src={imageUrl} alt=""/>
   </p>
   );
 }
}

3단계: props 속성 전달

2단계에서는 props를 통해 사용할 수 있는 이미지가 있다고 가정합니다. 이제 props 값을 채우고 싶습니다. props를 사용하여 React 구성 요소에 종속성을 전달할 수 있습니다. React 구성 요소에는 사용 가능한 Angular 종속성이 없다는 점에 유의하는 것이 중요합니다. 이런 식으로 생각할 수 있습니다. React 구성 요소는 Angular 애플리케이션에 연결된 컨테이너와 같습니다. 상위 컨테이너로부터 정보를 상속받기 위해 컨테이너가 필요한 경우 props를 통해 명시적으로 액세스해야 합니다.

따라서 종속성을 전달하기 위해 Angular에 renderImage 구성 요소를 추가하고 이를 imageUrl에 매개 변수로 전달합니다.

 angular.module('demoApp', [])
.component('renderImage', react2angular(RenderImage,['imageUrl']));

4단계: Angular 템플릿 가져오기

이제 다른 구성 요소를 좋아할 수 있습니다. 이 구성 요소를 Angular 앱은 다음과 같이 쉽습니다:

<p ng-repeat="item in $ctrl.bucketlist">
 <h2>{{item.city}}</h2>
 <p> I want to see <span ng-repeat="site in item.sites">{{site}}</span>
 <render-image image-url={{item.img}}></render-image>
</p>

Ta Da! 믿을 수가 없어요. 이건 마법이에요. 물론 (더) 힘든 일과 땀, 우리와 함께하는 커피 등입니다.

이제 React 구성 요소를 만들어 보겠습니다. 전사님!

위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되기를 바랍니다.

관련 기사:

JavaScript의 선택 드롭다운 상자에서 첫 번째 값을 가져오는 방법

AngularJS에서 실시간으로 비밀번호를 가져오고 표시하는 방법

오프셋 및 균일 애니메이션을 구현하는 방법 JS에서

위 내용은 AngularJS1.x 애플리케이션을 React로 마이그레이션(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!