WP-API를 활용한 개인 Blog 개발

안녕하세요. 흐린하늘입니다.

오늘 강좌는 WordPress가 제공하는 API를 Json 파싱을 통해 Post Data를 React로 바인딩하여 개인 Blog를 개발하는 예제입니다.

WordPress에서 제공하는 API를 통해 Data를 Fetch하고 useEffect와 useState hook을 활용하여 React로 타이틀과, 콘텐츠를 뿌려주는 간단한 Headless CMS예제입니다. 이를 응용하면, React Native나 Flutter 등으로 제작한 App의 벡엔드 콘텐츠 관리툴로도 충분한 활용이 가능합니다.

강의 시간 관계로 JWT나 Custom Field와 관련한 추가적인 부분은 별도 강좌로 업로드할 수 있도록 하겠습니다.

완성 된 개발자 Blog는 https://apiblog.graysky.co.kr 에서 확인하시면 됩니다.

먼저 WordPress의 json 을 사용하기 위하여 [알림판]에서 [설정] – [고유주소] 메뉴로 이동해서 고유주소 구조를 ‘글 이름’으로 설정합니다.

웹브라우저에서 http(s)://WordPress설치 URL/wp-json/wp/v2/posts 로 접속해서 Json형식의 데이터가 뿌려지는지 확인합니다.

위와 같이 정상적으로 Json으로 데이터가 뿌려지는 것이 확인되었다면 이제 다 된것입니다.

Creat-React-App 로 React 프로젝트를 생성한 후 Posts.jsx파일을 생성하고 아래 소스 내용을 활용해서 json 데이터를 바인딩하면 됩니다.

create-react-app .

/* Posts.jsx */
import React from 'react';
import { useEffect, useState } from 'react';

export default function Posts(){
 useEffect(() => {
  async function loadPosts(){
   const response = await fetch('http://url/wp-json/wp/v2/posts');
   if(!response.ok) {
    return;
   }
   const posts = await response.json();
   setPosts(posts);
  }
  loadPosts();
 },[])
return(
 <div>
  <h1>WP POST API TEST </h1>
  <div>
   {posts.map((post, index) => {
    <div key={index}>
     <div>
      <h2 dangerouslySetInnerHTML={{__html: post.title.rendered}} />
      <h4 dangerouslySetInnerHTML={{__html: post.content.rendered}} />
     </div>
    </div>
   ))}
  </div>
 )
}