[ReactJs] node.js를 이용한 react 컴포넌트 렌더링

node.js를 이용한 react 컴포넌트 렌더링

1. 정의

-  Node.js 를 이용하여 HTML 을 생성한다

2. 폴더구성

- /node

    - email.js : react 컴포넌트

    - index.js : node.js 소스

3. index.js

const ReactDOMServer = require('react-dom/server') const React = require('react') const Email = React.createFactory(require('./email.js')) const emailString = ReactDOMServer.renderToString(Email()) const emailStaticMarkup = ReactDOMServer.renderToStaticMarkup(Email()) console.log(emailString) console.log(emailStaticMarkup) const emailStringWithName = ReactDOMServer.renderToString(Email({name: 'Johny Pineappleseed'})) console.log(emailStringWithName)

1) createFactory() : React 엘리먼트를 반환하는 함수를 생성한다. createElement() 로 대체할 수 있다

2) renderToStaticMarkup() : 브라우저 측의 React 를 위한 마크업이 필요치 않을 때 사용한다. renderToString() 과 비슷하지만 속성이 모두 제거되었다.

3) renderToString() : 브라우저 측의 React 를 위한 마크업이 필요할 때 사용한다. React 를 이용한 유니버셜 자바스크립트를 사용할 경우 필수도 사용된다.

4) Email({name:'Kyle'}) : 서버에서 속성을 이용하여 브라우저에 값을 전달 할 수 있다.

5) data-react-checksum 속성 : 서버 측 react 는 html에 체크섬 형식의 속성을 추가한다. 그리고 서버측의 체크섬 값과 비교하여 브라우저의 불필요한 재생성, 리페인트, 재렌더링을 피한다.

4. email.js

const React = require('react') const Email = (props) => { return ( <div> <h1>Thank you {(props.name) ? props.name : ''} for signing up!</h1> <p>If you have any questions, please contact support</p> </div> ) } module.exports = Email