WordPress 사용자를 위한 React JS: 기본 소개

15년 이상 동안 WordPress는 단일 페이지 포트폴리오에서 본격적인 전자 상거래 플랫폼에 이르기까지 무엇이든 구축할 수 있는 가장 인기 있고 완벽한 CMS 솔루션이었습니다. WordPress는 업데이트, API, 인증, DB 계층 및 대부분의 프런트엔드와 같은 모든 백엔드 인프라에 PHP를 사용합니다. 그러나 다른 인기 있는 프레임워크와 마찬가지로 WordPress도 최근에 진화해야 했습니다.

데스크톱 및 기본 모바일 애플리케이션뿐만 아니라 웹용 JavaScript 애플리케이션의 잠재력과 능력이 증가함에 따라 WP REST API는 WordPress의 PHP 코어의 유산과 JavaScript의 부상 사이의 격차를 해소하려고 시도합니다. 나는 이것이 두 가지 이유로 WordPress의 큰 단계라고 생각합니다.

1. 기존 WP 웹 사이트는 React/Vue 또는 다른 프론트엔드 라이브러리를 사용하여 더 나은 UI 경험을 만들 수 있습니다.
2. 반대로 웹 개발자는 선택한 스택과 쉽게 통합할 수 있는 업계 표준 헤드리스 CMS를 얻습니다.

그것은 모두에게 윈-윈 상황입니다. 이 기사에서는 WordPress 백엔드를 위한 React 프론트엔드를 구축하는 데 에너지를 집중할 것입니다. 하지만 먼저 WordPress REST API를 살펴보겠습니다.

워드프레스 REST API 기초

WP REST API의 개발은 몇 년 전에 시작되었으며 처음에는 독립 실행형 기능 플러그인으로 설계되었습니다. 코드명 'Clifford'인 WordPress v4.4는 REST API의 실제 인프라를 WordPress의 핵심에 도입했습니다. 실제 엔드포인트는 코드명 'Vaughan'인 WordPress v4.7에 등장했습니다. WP API를 사용하면 WordPress를 사용하기 쉽고 안정적이며 JSON 친화적인 헤드리스 CMS로 사용할 수 있습니다.

JSON

JSON은 WordPress를 JavaScript 스택과 통합하려는 경우 선호되는 형식입니다. JSON은 매우 읽기 쉬운 구문을 사용하여 데이터를 효율적으로 전송할 수 있다는 점에서 XML과 유사합니다.

JSON은 실제로 JavaScript 객체의 텍스트 기반 표현을 구성하는 문자열입니다. 키-값 쌍 세트에 데이터를 저장합니다. WP 게시물의 간단한 JSON 예제는 다음과 같습니다.

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

WP REST API를 사용하는 완전한 JSON 응답에는 일반적으로 메타데이터와 같은 게시물에 대한 추가 정보가 포함됩니다. 애플리케이션에 대한 프론트 엔드 테마 또는 플러그인을 만드는 데 필요한 모든 것이 있습니다.

끝점

WordPress 엔드포인트는 대중이 매우 쉽게 접근할 수 있습니다. 최신 버전의 WordPress를 실행하는 경우 URL 끝에 /wp-json/wp/v2 를 추가하기만 하면 됩니다. 예를 들어 로컬 호스트에서 WordPress 인스턴스를 설정한 경우 127.0.0.1/wp-json/wp/v2 에서 기본 엔드포인트에 액세스할 수 있습니다. 출력을 예쁘게 만들고 싶다면 브라우저에서 JSON을 보기 좋게 만드는 JSON 뷰어 확장을 사용할 수 있습니다.

화면에 표시되는 데이터는 본질적으로 JSON 형식의 메타 정보이자 콘텐츠입니다. 여기에서 수행한 작업은 경로를 정의하고 브라우저에 데이터를 가져오도록 요청하는 것입니다.

경로란 무엇을 의미합니까? 경로는 특정 메서드에 매핑된 URL입니다. WordPress 코어는 경로를 읽고 모든 '/'가 따라야 하는 특정 경로 또는 매개변수를 나타냄을 이해합니다.

예를 들어 엔드포인트는 '/wp-json/wp/v2/posts/1'이 될 수 있으며 여기서 ID가 1인 게시물을 요청합니다. WordPress API는 매우 광범위하기 때문에 유용합니다. 이는 웹사이트에서 모든 데이터를 가져와 엔드포인트로 전환할 수 있는 기능으로 해석됩니다. WordPress의 거의 모든 핵심 기능이 지원되며 향후 모든 기능도 지원됩니다. 다음은 이 튜토리얼을 작성하는 시점에 지원되는 WordPress API 목록입니다.

테마 개발자와 플러그인 개발자는 애플리케이션에 대한 사용자 지정 끝점을 만들 수 있습니다. 사용 가능한 모든 엔드포인트를 확인하려면 Postman과 같은 애플리케이션을 다운로드할 수 있습니다. 이것은 API 탐색을 위해 특별히 제작된 GUI를 제공합니다. 또한 플러그인에 의존하지 않고도 타사 앱에 직접 API를 호출할 수 있습니다.

예를 들어 보겠습니다. 파일을 업로드하고 여러 버전을 유지 관리하는 것은 모든 최신 웹 응용 프로그램에 필수적인 요구 사항입니다. 미디어 파일의 경우 특히 그렇습니다. WordPress에는 이를 수행할 수 있는 플러그인이 많이 있습니다. 그러나 이를 사용하려면 WordPress 서버를 호출해야 할 수도 있습니다.

WP API를 사용하면 미디어 처리 논리를 WordPress에서 추상화할 수 있습니다. 프론트엔드에서 직접 모든 타사 API 호출을 할 수 있어 문제 분리 측면에서 매우 좋습니다. Cloudinary와 같은 라이브러리를 사용하여 이미지 및 기타 미디어 파일을 즉석에서 조작한 다음 클라우드에 업로드할 수 있습니다. 업로드되면 이미지에 대한 URL을 WP 백엔드에 저장할 수 있습니다. 옵션은 무한하며 원하는 대로 조각을 결합할 수 있습니다.

이제 WordPress 백엔드를 React와 연결하는 방법을 살펴보겠습니다.

React 시작하기

React는 웹에서 사용자 인터페이스 및 대화형 애플리케이션을 구축하기 위한 선언적 프론트 엔드 라이브러리입니다. React를 사용하면 컴포넌트로 알려진 더 작은 독립적인 재사용 가능한 코드 조각을 작성할 수 있습니다. React 프로젝트를 만들어 첫 번째 구성 요소를 만들어 보겠습니다.

React 프로젝트를 생성하는 가장 일반적인 방법은 create-react-app을 실행하는 것입니다. CRA는 React를 배우기에 편안한 환경을 제공하며 초보자인 경우 새로운 단일 페이지 애플리케이션 구축을 시작하는 가장 좋은 방법입니다. ES6, webpack과 같은 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정합니다. 또한 create-react-app은 훌륭한 개발자 경험을 제공하고 프로덕션용으로 앱을 최적화합니다.

컴퓨터에 Node >= 8.x 및 npm >= 5.2가 있어야 합니다. 프로젝트를 생성하려면 다음 명령어를 실행하세요.


npx create-react-app wp-react-demo


위의 명령은 wp-react-demo 라는 반응 응용 프로그램에 대한 상용구 템플릿을 만듭니다.


cd wp-react-demo
npm start


모든 것이 잘되면 http://localhost:3000/에 있는 개발 서버에서 새로 생성된 응용 프로그램을 제공할 수 있어야 합니다.

create-react-app에 의해 생성된 디렉토리 구조가 궁금하다면 다음과 같습니다.

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


공개 디렉토리에는 애플리케이션을 시작하는 데 필요한 모든 자산이 포함되어 있습니다. src 디렉토리는 우리가 작업할 모든 JavaScript 파일로 구성되어 있으며 여기서 많은 시간을 보낼 것입니다.

localhost:3000을 방문하면 index.html 파일이 로드됩니다. public/index.html 파일을 열면 별 내용이 없습니다. 그러나 중간 어딘가에서 다음 행을 찾을 수 있습니다.

<div id="root"></div>

그것이 React가 컴포넌트 트리를 애플리케이션의 루트로 렌더링하는 시작점입니다.

그게 무슨 뜻이야? src 디렉토리로 이동하여 index.js를 엽니다.

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

ReactDOM.render(<App />, document.getElementById('root'));

React는 문서에서 id가 "root"인 요소를 찾은 다음 구성 요소를 루트에 넣습니다. 실제로 App 구성 요소가 렌더링되고 회전하는 React 로고가 나오는 곳입니다. src/App.js 파일을 열어 확인할 수 있습니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

이것은 기본적으로 구성 요소의 모양입니다. 각 구성 요소는 UI의 일부를 렌더링합니다. 하나의 구성 요소를 다른 구성 요소 안에 구성할 수 있으며 이것이 다음과 같은 구성 요소 트리 구조를 얻는 방법입니다.

왜 render() 내부에서 HTML을 사용할 수 있는지 궁금하다면 JSX의 마법입니다. JSX는 JavaScript에 대한 구문 확장이며 JavaScript 파일에서 일반 HTML을 사용할 수 있습니다. 공식 문서에서 자세한 내용을 읽을 수 있습니다.

모든 HTML 콘텐츠를 삭제하고 다음으로 대체하겠습니다.

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';