[React.js] Express ejs + React component

목적

---

기존에 개발하던 페이지에 React Component가 필요할 때 간편하게 추가해서 사용하기 위함.

하나의 앱을 전부 React로 구성하지않고 필요한 곳에서만 사용하기에 좋음.

React Package를 개발환경에 구축하지 않고 사용할 수 있음.

필요한 내용

---

- Express 파일 경로 구성

- React Component 생성 (기존 프로젝트에 추가하기 위해서는 React Component파일에서 2줄만 추가하면 된다.)

- Component가 필요한 위치 설정

첫번째 - 필요한 Component 작성

---

React 공식 홈페이지에서 예시로 만들어준 Component를 사용합니다.

'use strict';
 
const e = React.createElement;
 
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
 
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
 
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
 
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

다만 24~25줄에 유의해서 보면 됩니다.

24~25줄은  component를 DOM으로 보낼 수 있도록 해줍니다.

두번째 - 페이지에 추가

---

[Exsting Code]
 
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
 
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="/reactComponent/like_button.js"></script>
 
[Exsting Code]

4번째 줄은 해당 component가 반영되어지는 곳입니다.

8~9번째 줄은 React를 CDN방식으로 Load합니다.

11번째 줄은 첫번째에서 만든 component 파일을 Load 합니다.

세번째 - Express의 App.js 수정

---

app.use('/reactComponent', express.static(__dirname + '/reactComponent'));

저의 경우는 react component를 따로 관리하기 위해서 폴더를 새로 만들었습니다.

그런 경우에는 위의 코드를 추가하여 제대로된 경로에서 js를 불러올 수 있도록 해줍니다.

app.use의 앞에 있는 /reactComponent는 client에서 불러올때 사용할 경로이며, 뒤에 있는 값은 실제 파일 경로입니다.

여기까지하면 기존의 프로젝트에서 React Component를 간편하게 추가할 수 있습니다.

프로젝트 디렉토리

---

│  .jshintrc
│  app.js
│  package-lock.json
│  package.json
│  tree.txt
│  
├─bin
│      www
│      
├─node_modules
│
├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.css
│          
├─reactComponent
│      like_button.js
│      
├─routes
│      index.js
│              
└─views
    │  error.ejs
    │  index.ejs
    │  
    └─manageMemeber

Product 용으로 만들기

---

위의 방법으로 하면 minify가 되지않은 페이지가 형성됩니다.

즉, 클라이언트 측에서 많은 load시간을 소비할 수 있습니다.

그래서 React에서는 minify CDN과 component의 minfy 방법을 제공해주고 있습니다.

Product용 react component만들기 순서

1) 개발한 파일을 minify하기

npm install terser
npx terser -c -m -o example.min.js -- example.js

2) minify CDN 사용

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

참고자료

---

https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx

http://infodbbase.tistory.com/41