https://lamosty.com/2015/12/14/react-wp-theme-creating-dumb-components/ 

오늘의 포스트에서는 Bootstrap 블로그 템플릿을보고 React Dumb 구성 요소를 만들어 보겠습니다. 너무 화려하지 않고 붙여 넣기 및 리팩터링을 일부 복사합니다. 이 기사의 단계를 완료하면 스마트 컴포넌트를 만들고, 바보 같은 요소를 플러그인에 적용하고, 블로그 테마를 사용할 준비가 될 것입니다. 

Tutorial navigation

1. React 단일 페이지 WordPress REST API 주제 자습서 
2. React WP 테마 : 구조, 노드 패키지 및 Webpack
3. React WP 테마 : Smart vs Dumb components + React Router
4. React WP 테마 : 바보 같은 구성 요소 만들기

첫 번째 단계는 부트 스트랩의 블로그 테마 디자인을 분석하여 논리적 부분으로 분해하는 것입니다. 아래의 첫 번째 그림을 살펴 보겠습니다.

여기에서 메인 탐색, 헤더, 게시물 목록 및 사이드 바가 있음을 알 수 있습니다. 아래 그림은 테마의 하단 부분을 묘사합니다.

이번에는 페이지 매김(pagination)과 footer가 있습니다.

우리는 이러한 관찰에 따라 반응 성분을 생성 할 것이다.

Creating the dumb components

이전 기사에서, 나는 똑똑한 vs dumb React 구성 요소에 대해 이야기했다. 요약하면, 기본적으로 컨트롤러와 뷰 (MVC 세계에서 온 뷰어)의 구분입니다. React 구성 요소에는 모든 종류의 논리 및 표현이 포함될 수 있으므로 스마트 구성 요소는 논리 (데이터 가져 오기, 계산, 변환)와 멍청한 논리 (HTML)를 처리하므로 별도의 구성 요소로 분할하는 것이 좋습니다.

첫째, 더미 구성 요소를 만들어 보겠습니다. 그것들을 src/components 폴더에 넣을 것입니다. 

Header

src/components/ 폴더에 Header.js라는 새 파일을 만듭니다. 첫째, 패키지에서 React와 Component 객체를 가져와야합니다. 왜냐하면 둘 다 코드 전체에서 사용되기 때문입니다.

import React, { Component } from 'react';

이제 Component에서 확장되는 Header라는 새로운 클래스를 만듭니다.

class Header extends Component {

}

첫 번째 그림에서 우리는 헤더가 정말로 단순하다는 것을 알 수 있습니다. 단지 두 줄의 텍스트입니다. 그래서 클래스에는 JSX 구문으로 작성된 HTML이있는 render () 메소드 만 포함됩니다. 전체 파일은 다음과 같습니다.

import React, { Component } from 'react';

export default class Header extends Component {
    render() {
        return (
            <div className="blog-header">
                <div className="container">
                    <h1 className="blog-title">The Bootstrap Blog</h1>
                    <p className="lead blog-description">An example blog template built with Bootstrap.</p>
                </div>
            </div>
        );
    }
}

Footer and Sidebar

Header와 마찬가지로 바닥 글과 사이드 바는 매우 간단합니다. 우리는 React, Component를 가져 와서 HTML을 JSX로 변환합니다. 바닥 글, 사이드 바. 참고 : 향후 이러한 구성 요소가 업데이트되어 간단하지 않을 수 있습니다. 이 경우, 그것을 수행하는 방법을 설명하는 새 문서를 작성하겠습니다.

Facebook은 JSX 변환기에 대한 멋진 온라인 HTML을 제공합니다. 내가 직접하고 싶지만, 그 일을 위해 사용할 수도 있습니다.

MainNavigation

이제, 더 흥미로운 것이 있습니다. 앞서, React와 함께 React Router를 사용하여 기본 Routing을 구현하는 방법을 설명했습니다. 그러나 그것은 퍼즐의 한 부분 일뿐입니다. 네비게이션의 링크는 어떻습니까? 어떻게 생겼을 까?

평소처럼 React와 Component를 가져와야합니다. 그런 다음 반응 라우터에서 Link를 가져와야합니다.

import { Link } from 'react-router'; 

Link는 <a> 요소를 적절한 URL 주소로 렌더링하고 링크를 클릭 할 때 라우팅을 수행하는 React 구성 요소입니다. 또한 링크가 활성화되어있을 때 요소에 특수 클래스를 지정합니다 (=> 링크가 가리키는 사이트에 있음). 어떻게 생겼지?

<Link to="/about" className="nav-link" activeClassName="active">About</Link>

가장 중요한 것은 prop입니다. 링크가 이동할 <Route>를 지정합니다. 여기서는 <Route path="about" component={AboutPageContainer} /> 경로입니다. 경로의 시작 부분에 '/'를 두는 것에 주목하십시오. 그렇지 않으면 링크가 현재 URL에 'about'을 추가하기 때문에 모든 경로와 일치하지 않기 때문입니다. 따라서 About 링크를 클릭하면 React가 AboutPageContainer 구성 요소를 렌더링하므로 About 페이지로 이동합니다 (다음 기사 참조).

우리는 activeClassName 소품을 사용하여 React Router가 활성화되었을 때 링크에 추가 할 자체 CSS 클래스를 정의 할 수 있습니다.

다음은 완전한 MainNavigation.js 파일입니다.

import React, { Component } from 'react';
import { Link } from 'react-router';

export default class MainNavigation extends Component {
    render() {
        return (
            <div className="blog-masthead">
                <div className="container">
                    <nav className="nav blog-nav">
                        <Link to="/" className="nav-link" activeClassName="active" onlyActiveOnIndex={true}>Home</Link>
                        <Link to="/2015/02/some-article" className="nav-link" activeClassName="active">Some Article</Link>
                        <Link to="/about" className="nav-link" activeClassName="active">About</Link>
                    </nav>
                </div>
            </div>
        );
    }
}[/cdoe]

AboutPageAboutPage.js는 페이지 데이터 (제목, 내용 등)를 입력으로 사용하여 HTML 형식의 페이지를 출력하는 멍청한 구성 요소입니다. 이 구성 요소는 보안주의 사항으로 인해 HTML 코드를 React 구성 요소에 넣을 수는 없습니다. 단 한 가지를 제외하고는 앞서 설명한 내용과 매우 유사합니다.



표준 페이지에는 데이터베이스에 저장 될 때 단락 (<p>)으로 묶여지는 텍스트가 있습니다. 일반적으로 React는 "크로스 사이트 스크립팅 (XSS) 공격까지 열 수 있기 때문에"React 구성 요소에 HTML을 넣지 못하도록합니다. 다행히도이 제한을 우회하는 공식적인 방법이 있습니다.하지만 경고합니다. 페이지에있는 HTML / JS 코드에 대해 확신해야합니다. 그것은 정말 불쾌한 해킹을 초래할 수 있습니다.



HTML을 React 구성 요소에 넣으려면 먼저 함수를 작성해야합니다.


createMarkup(html) {
    return {
        __html: html
    }
}이 함수는 (보안 된) HTML을 입력으로 사용하고 하나의 키 __html (두 개의 밑줄에 주목)과 (보안 된) HTML을 값으로 사용하여 객체를 반환합니다. 공상적인 것은 아니며 위험을 이해하지 못하는 프로그래머를 막을 수 있습니다.



이제는 createMarkup 함수가 있으므로 AboutPage 구성 요소를 만드는 것은 정말 간단합니다. 전체 코드는 다음과 같습니다.

[code]

import React, { Component } from 'react';

// Dumb component
export default class AboutPage extends Component {
    createMarkup(html) {
        return {
            __html: html
        }

    }

    render() {
        const { page } = this.props; // Extract the page from the component's props.

        return (
            <div className="blog-post">
                <h2 className="blog-post-title">{page.title.rendered}</h2>
                <div dangerouslySetInnerHTML={this.createMarkup(page.content.rendered)} />
            </div>
        );
    }
}

Post

Post.js는 AboutPage.js와 거의 동일하지만, 게시일을 사용하여 표시하는 경우는 예외입니다. 구성 요소에 링크하십시오.

Conclusion

JSX 구문을 사용하여 간단한 React 구성 요소를 작성하는 방법과 HTML 컨텐츠를 출력하는 방법을 배웠습니다. 다음 기사에서는 WP 백엔드에서 데이터를 검색하고 논리 및 페이지 매김을 처리하는 스마트 구성 요소를 작성합니다. 계속 지켜봐!