분류 php

Wordpress 테마에 React을 포함 시키는 방법

컨텐츠 정보

  • 조회 211 (작성일 )

본문

React Ships with WordPress 

WordPress 5.0 이후 React (또는 추상화)는 이제 WordPress와 함께 제공됩니다.


https://dev.to/zgordon/how-to-include-react-in-a-wordpress-theme-k88 


WordPress는 전체 React 및 ReactDOM 라이브러리를 가져 와서 wp.element라는 전역 창 개체로 내 보냅니다.


이것은 대부분의 React 앱 작동 방식과 약간 다릅니다.


일반 React 앱에서 우리는 React를 가져옵니다. 


일반적으로 React 앱 또는 프로젝트에서는 React를 사용하는 각 파일의 맨 위에 React를 가져옵니다. 

기본 색인 페이지에서 ReactDOM을 가져올 수도 있습니다.


// A Normal React App
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./components/MyComponent";

ReactDOM.render(<MyComponent />, document.getElementById("root"));


WordPress에서는 전역 wp.element 객체에서 사용할 수 있으므로 React 또는 React DOM을 가져 오지 않습니다.


따라서 WordPress 프로젝트에 React를 포함 시킬 때 중요한 차이점은 파일로 파일을 가져 오지 않는다는 것입니다.


React를 정상적으로 사용하는 것과 WordPress 테마 또는 플러그인을 사용하는 것의 또 다른 차이점은 툴링과 관련이 있습니다.


React 앱 생성 대신 WP 스크립트 사용 


React 앱을 빌드한 경우 React 앱 작성 또는 유사한 도구 번들을 사용하여 개발 서버를 실행하고 프로덕션 코드를 빌드 할 수 있습니다.


이 툴링은 React가 코드와 함께 제공되지 않고 전역 창 객체 wp.element에 로드되므로 WordPress에서도 잘 작동하지 않습니다. React 앱 생성은 공식적으로 배출하지 않고 외부 소스에서 React 로딩을 지원하지 않으므로 툴링에 가장 적합한 옵션은 아닙니다.


운 좋게도 WordPress 팀은 Create React App과 함께 사용되는 React 스크립트 패키지를 기반으로 wp-scripts 패키지를 구축했습니다.


WP 스크립트에는 기본적으로 develop, lint, test 및 build 명령이 포함됩니다. 예를 들어 SASS 컴파일과 같은 특별한 작업을 수행하려는 경우 고유한 사용자 정의 웹팩 구성으로 확장 할 수도 있습니다.


아래에서 WP 스크립트를 설정하는 방법을 살펴 보겠습니다. 먼저 프런트 엔드에 React가 로드 된 기본 테마 설정을 가져옵니다.


테마에서 React 큐잉 


React가 로드 되도록 하려면 wp-element를 고유한 JavaScript 파일의 종속성으로 추가하면 됩니다.


다음은 functions.php 파일에 있습니다.


// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

이것이 작동하려면 /build/index.js에 파일이 필요합니다. 빌드 명령을 실행할 때 WP 스크립트가 이를 생성합니다.


이제 wp.element가 테마의 프론트 엔드에 로드됩니다.


WP 스크립트를 설정하는 방법 


WP 스크립트 설정에는 두 단계가 포함됩니다. 

1) wp-scripts 설치; 

2) 스크립트를 package.json 파일에 추가하십시오.


package.json 파일을 아직 설정하지 않은 경우 WordPress 테마의 루트에서 다음 명령을 실행하십시오.


npm init

각 프롬프트마다 return 키를 누르거나 고유한 사용자 정의 정보를 추가 할 수 있습니다.


package.json 파일이 작성되면 다음 명령을 실행하십시오.


npm install @wordpress/scripts --save-dev


그러면 WP 스크립트가 node_modules에 다운로드 되어 명령행에서 사용할 수 있게 됩니다.


이제 다음과 같이 할 수 있습니다 :


wp-scripts start

그러나 보다 보편적이고 사용하기 쉽도록 WordPress Scripts를 NPM 스크립트에 매핑합니다.


package.json 파일을 열고 현재 "스크립트"설정을 다음으로 바꾸십시오.


{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}


이들을 모두 필요로 하지 않으면 시작 및 빌드 명령으로 단축 할 수 있습니다. 그러나 다른 것들도 유용 할 수 있습니다.


이제 다음을 실행할 수 있습니다.


npm start


그리고 WP Scripts start 명령을 호출합니다. src/index.js에서 가져온 파일을 찾아 파일이 변경 될 때마다 build/index.js로 빌드합니다.


빌드 명령은 동일한 작업을 수행하지만 한 번만 수행되며 변경 사항을 감시하지 않습니다.


사용자 정의 페이지 템플리트에 React 추가 


점점 더 많은 콘텐츠 표시가 워드 프레스에서 블록을 통해 제어됩니다. 

WordPress의 블록도 React를 기반으로 하지만 이 블로그 블로그의 범위를 벗어난 자체 생태계입니다.


여기서는 React를 사용자 정의 페이지 템플리트에 추가하는 데 중점을 둘 것입니다. 우리가 하는 모든 작업을 블록으로 만들 수 있지만, React가 유용한 페이지 템플릿을 만들 때도 여전히 있습니다.


이를 위해 2020 기본 워드 프레스 테마의 하위 테마를 만들 것입니다. 내 기본 테마 구조는 다음과 같습니다.


/build
/src
-- index.js
functions.php
package.json
page-react.php
style.css


이것들은 우리가 필요로 하는 최소 요구 사항에 관한 것입니다.


설명이 많지 않으면 다음은 functions.php 파일과 style.css 파일의 코드입니다.


functions.php


<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

  $parent_style = 'twentytwenty-style'; 

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //wp_get_theme()->get('Version')
  );

  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );

}


style.css


/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Zac Gordon
 Author URI:   https://javascriptforwp.com/
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/


또한 다음과 같은 매우 간단한 사용자 정의 페이지 템플릿 page-react.php가 있습니다.


<?php
/**
 * Template Name: React Template
 */
get_header();
?>

<main id="site-content" role="main">
    <article class="post-2 page type-page status-publish hentry">
        <?php get_template_part( 'template-parts/entry-header' ); ?>
        <div class="post-inner thin">
            <div class="entry-content">             

                <div id="react-app"></div><!-- #react-app -->

            </div><!-- .entry-content -->
        </div><!-- .post-inner -->
    </article><!-- .post -->
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>


이것은 기본적으로 React 코드를 로드 하기 위해 <div id = "react-app"> </ div>가 추가 된 상위 테마의 단순화 된 page.php 템플릿입니다.


React로 테마의 더 큰 섹션을 만들 수는 있지만 여기서는 단일 템플릿에 로드 하는 데 중점을 둘 것입니다.


이 설정 프로세스를 완료하려면 새 페이지를 작성하고 "React Template"을 페이지 템플리트로 선택하십시오.


우리의 React 작성 


src/index.js 파일 안에서 React 코드를 작성하여 페이지에 추가 할 수 있습니다.


이 시리즈의 과정에서 이 내용을 작성하지만 지금은 간단한 구성 요소를 추가하여 버튼을 클릭하여 투표 수를 늘릴 수 있습니다.


file: /src/index.js


const { render, useState } = wp.element;

const Votes = () => {
  const [votes, setVotes] = useState(0);
  const addVote = () => {
    setVotes(votes + 1);
  };
  return (
    <div>
      <h2>{votes} Votes</h2>
      <p>
        <button onClick={addVote}>Vote!</button>
      </p>
    </div>
  );
};
render(<Votes />, document.getElementById(`react-app`));


여기에 몇 가지 중요한 사항이 있습니다.

  1. 페이지에서 React 또는 ReactDOM을 가져 오는 것이 아니라 이미 로드 된 wp.element에서 필요한 것을 가져옵니다.
  2. ReactDOM.render()도 wp.element에 포함되어 있습니다
  3. 현재 상태는 WordPress에 저장되지 않지만 향후 기사에서 변경됩니다.

여기에서 원하는 React를 작성하고 코드를 별도의 파일로 분리하고 필요에 따라 가져올 수 있습니다.


이것은 WordPress 테마에 React를 추가하여 시작하고 실행할 수 있기를 바랍니다.


라이브러리 가져 오기를 사용하도록 Webpack 외부 설정 


사용하는 대부분의 React 패키지는 React가 최종 코드와 함께 번들로 제공되는 데 사용되며 "React"에서 가져 오기 React 및 이와 유사한 항목을 자체 코드로 포함합니다.


기본적으로 WP 스크립트에서는 작동하지 않습니다. 이 작업을 수행하려면 자체 webpack.config.js 파일을 사용하여 WP 스크립트를 확장하고 번들 코드 외부에서 사용할 수 있는 외부 리소스로 React 및 ReactDOM을 정의해야 합니다.


이를 수행하려면 테마의 루트에 새 webpack.config.js 파일을 작성하고 다음을 추가하십시오.


const defaults = require("@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaults,
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};

WP 스크립트에서 기본 구성을 가져 와서 Webpack의 대체 구성으로 추가합니다. 그런 다음 "react"및 "react-dom"을 외부에서 사용 가능한 것으로 정의하는 사용자 정의를 추가 할 수 있습니다.


이렇게 하면 React를 가져올 것으로 예상되는 타사 React 라이브러리를 사용할 때 오류가 발생하지 않습니다.


다음 단계 


여기에서 테마에 필요한 모든 React 빌드를 시작할 수 있습니다. 머리글, 사이드 바 또는 바닥 글과 같은 다른 위치에 React를 로드해야 할 수도 있지만 프로세스는 매우 비슷합니다.


다음 기사에서는 WordPress 테마의 React로 더 많은 일을 할 것입니다! 이 시리즈의 주요 저장소는 여기에서 찾을 수 있습니다.


WordPress 테마 및 프로젝트에서 React 사용 방법을 공유하십시오!