Drupal에서 빠르게 반응하는 방법

게시 됨: 2022-10-11

"How"에 도달하기 전에 Drupal에서 React를 구현하는 "Why"에 대해 조금 이야기합시다. 아시다시피 React는 개발자가 고품질의 복잡한 프론트 엔드 인터페이스를 구축할 수 있게 해주는 매우 개발자 친화적인 구성 요소 기반 JavaScript 라이브러리입니다. Drupal은 콘텐츠 중심의 유연한 웹 경험을 가능하게 하는 강력하고 강력한 콘텐츠 관리 프레임워크입니다. React의 우수한 프론트엔드 테마 기능과 Drupal의 강력한 백엔드 프레임워크를 결합하면 성능이 뛰어나고 탁월한 디지털 경험을 제공할 수 있습니다. Drupal 9 에서 React 구성 요소를 만드는 방법을 자세히 살펴보겠습니다.

그러나 먼저 React가 무엇입니까?

정의에 따르면: “React는 프론트엔드 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 구성 요소 라고 하는 작고 격리된 코드 조각에서 복잡한 UI를 구성할 수 있습니다."

Pattern lab에 익숙하다면 React의 기본 빌딩 블록을 이해하기 쉬울 것입니다. 우리는 페이지의 기본 빌딩 블록이나 원자로 시작하여 디자인을 만들기 위해 계속 작업합니다.

많은 개발자가 JSX를 사용하여 React에서 HTML 코드를 작성하는 것을 선호합니다. 그 이유를 계속 읽으십시오.

React용 JSX를 사용해야 하는 이유

React의 코딩 스타일과 구문은 복잡할 수 있으며 개발자에게 그다지 친숙하지 않습니다. 아래에서 보듯이 React에서 HTML 요소가 생성되는 방식입니다.

 const element = React.createElement ( 'h1', {className: 'greeting'}, 'Hello, world!' );

JSX를 사용하여 React에서 동일한 기능을 작성하는 방법은 다음과 같습니다.

 const element = <h1 className="greeting">Hello World!</h1>

JSX를 사용하면 미리 정의된 "className" XML 구문을 사용하여 아래에 언급된 대로 클래스 이름을 지정할 수 있습니다. 보시다시피 JSX에서 동일한 코드를 작성하는 것이 훨씬 쉽고 직관적이며 덜 장황합니다. 따라서 거의 전체 React 커뮤니티는 JSX를 사용하여 React 코드를 작성합니다.

JSX 란 무엇입니까? JSX는 JavaScript XML을 나타냅니다. XML은 개발자에게 매우 사용자 친화적인 구문입니다. JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있습니다.

React와 Javascript에서 요소 생성의 차이점을 살펴보십시오. React가 코드를 작성하고 액세스하는 데 더 많은 유연성을 제공하여 개발 및 디버그를 쉽게 만드는 방법을 알게 될 것입니다.

반응

자바스크립트

const 버튼 = <button onClick={console.log('clicked!')}>나를 클릭하세요</button>

HTML 파일

<button>나를 클릭하세요</button>

JS 파일

함수 onClick() {
console.log('클릭!');
};
const 버튼 = document.getElementById('내 버튼');
button.addEventListener('클릭', onClick);

JSX를 사용하면 개발자가 코드를 쉽게 작성할 수 있지만 브라우저가 이해할 수 있는 최상의 형식은 아닙니다. 이러한 이유로 브라우저에 제공될 일반 JavaScript 형식으로 컴파일합니다.

반응 데이터 양식

React 구성 요소에는 두 가지 형태의 데이터가 있습니다.

• 소품
◦ Props는 구성 요소 계층 구조의 상위 항목에서 받은 속성입니다. 변경하거나 변경할 수 없습니다. 예를 들어, 부모에서 자식 구성 요소로 변수를 전달하려면 prop으로 전달할 수 있습니다.
• 상태
◦ 상태는 구성 요소에 대해 로컬이며 이벤트에 의해 변경될 수 있습니다. 예를 들어 상태 변수(state.text)가 있는 경우 다른 작업에 따라 텍스트가 변경될 수 있습니다.

참고: 자식 구성 요소는 해당 상태의 값과 props를 통해 해당 상태를 업데이트하는 이벤트를 모두 받을 수 있습니다.

React를 Drupal과 통합하는 방법

먼저 사용자 정의 모듈을 만든 다음 JSX 파일을 만드는 것으로 시작하겠습니다.
이제 아래와 같이 Drupal 사용자 정의 모듈을 생성해 보겠습니다.
module/react/react.info.yml 생성

 web > modules > react > ! react.info.yml 1 name: React 2 type: module 3 description: 'A module for basic React components.' 4 core_version_requirement: *8.7.7 || ^9

다음으로 아래와 같이 React 파일을 생성해 보겠습니다. react-app id에 인쇄될 H1 태그가 있는 HTML 마크업을 만들고 있습니다.

모듈 생성/react/js/src/index.jsx

 web > modules > react > js > src > # index.jsx 1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 4 ReactDOM. render( 5 <h1>Hello there - world!</h1>, 6 document. getElementById( ' react—app') 7 );

Drupal로 JSX 파일에 접근하기

이제 Drupal이 방금 만든 JSX 파일에 액세스하고 사용할 수 있으려면 Webpack으로 JavaScript 도구 체인을 설정해야 합니다.

높은 수준에서 index.jsx 와 같은 소스 JavaScript 파일을 사용하여 궁극적으로 최적화된 단일 .js 파일을 출력하는 다양한 빌드 단계를 통해 전달하는 프로세스를 구성하고 있습니다. 이 빌드 단계를 통해 Drupal 모듈 또는 테마에서 작업하는 동안 전체 React/JavaScript 에코시스템을 활용할 수 있습니다.

기본 단계는 다음과 같습니다.

JavaScript 자산을 변경되지 않는 알려진 위치의 하나 이상의 "번들" JavaScript 파일로 처리하는 도구 체인을 설정하십시오.
빌드 도구 체인에서 번들된 자산을 가리키는 Drupal 자산 라이브러리를 만듭니다.

1단계: React, Webpack 및 Babel 설치

이를 설치하기 전에 개발 환경에 node와 nmp가 준비되어 있는지 확인해야 합니다. React는 자바스크립트 라이브러리입니다. Babel과 webpack은 브라우저에서 .jsx를 javascript로 변환하는 데 필요한 컴파일러입니다. Babel은 .jsx 파일을 컴파일하는 최고의 커뮤니티 컴파일러 중 하나입니다. React, Webpack 및 Babel을 설치하려면 터미널의 테마 modules/react/ 루트 디렉토리에서 다음 명령을 실행하세요.

 1 # Create a package.json if you don't have one already. 2 npm init -y 3 # Install the required dependencies 4 npm install —-save react react-dom prop—types 5 npm install —-save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

2단계: webpack.config.js 파일로 Webpack 구성

모듈의 루트에 webpack.config.js 파일을 생성합니다: modules/react/webpack.config.js

 1 const path = require('path'); 2 3 const config = { 4 entry: { 5 main: ["./js/src/index.jsx"] 6 }, 7 devtool:'source-map', 8 mode:'development', 9 output: { 10 path: path.resolve(__dirname, "js/dist"), 11 filename: '[name].min.js' 12 }, 13 resolve: { 14 extensions: ['.js', '.jsx'], 15 }, 16 module: { 17 rules: [ 18 { 19 test: /\.jsx?$/, 20 loader: 'babel-loader', 21 exclude: /node_modules/, 22 include: path.join(__dirname, 'js/src'), 23 } 24 ], 25 }, 26 }; 27 28 module.exports = config;

3단계: .babelrc 파일로 Babel 구성

모듈의 루트 디렉토리에 즉시 사용 가능한 사전 설정(React 코드를 컴파일하는 동안 사용됨)으로 .babelrc 파일을 생성하여 Babel에 대한 일부 구성을 제공합니다: modules/react/.babelrc

 web > modules > react > .babelrc >... 1 { 2 "presets": [ 3 "@babel/preset-env", 4 "@babel/preset-react" 5 ] 6 }

4단계: package.json 에 일부 도우미 스크립트 추가

이것은 작업 전에 항상 기본 파일 package.json을 참조하므로 nmp 패키지를 실행하는 데 필요합니다.

 > Debug "scripts": { "build": "webpack", "build:dev": "webpack", "start": “webpack —-watch" },

5단계: 빌드를 실행하여 jsx 파일을 단일 js 파일로 컴파일

이제 JSX 파일을 컴파일할 준비가 되었습니다.

npm run build (OR) npm run build:dev

기본적으로 이것은 webpack.config 파일의 구성에 따라 파일을 컴파일하고 이제 언급된 리포지토리 js/src/dist 에 컴파일된 js 파일을 생성합니다.

6단계: Drupal 자산 라이브러리 정의

이제 컴파일된 JavaScript 파일을 라이브러리 ( library.yml )에 Drupal 자산으로 추가할 수 있습니다.

 web > modules > react > ! react.libraries.yml 1 react_app: 2 version: 1.0 3 js: 4 js/dist/main.min.js: {minified: true}

이제 Drupal 웹 사이트에서 멋진 React 구성 요소를 만들 준비가 되었습니다.

내 최종 결과는 다음과 같습니다(아래). H1 태그 "Hello Specbee"로 생성한 React 블록을 볼 수 있습니다.

마지막 생각들

쉽지 않았나요? Drupal에서 React 컴포넌트를 생성할 때, Drupal에서 생성된 React dom 요소(' react-app ')가 있는지 확인하고 항상 Javascript 파일(React JSX 파일에서 컴파일한)을 Drupal 라이브러리에 첨부하십시오. 방금 읽은 내용이 마음에 드셨나요? 매주 귀중한 콘텐츠를 게시하기 위해 노력하고 있습니다. 주간 뉴스레터를 구독하여 최신 정보를 모두 받아보세요.