[React.js] Express ejs + React component

2018. 12. 31. 00:32개발/React.js

반응형

목적


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

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

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






필요한 내용


- Express 파일 경로 구성

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

- Component가 필요한 위치 설정






첫번째 - 필요한 Component 작성


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'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);
cs


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

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








두번째 - 페이지에 추가


1
2
3
4
5
6
7
8
9
10
11
12
13
[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]
cs



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

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

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







세번째 - Express의 App.js 수정


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



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

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

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



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





프로젝트 디렉토리


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
│  .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
cs






Product 용으로 만들기


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

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

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


Product용 react component만들기 순서

1) 개발한 파일을 minify하기

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

2) minify CDN 사용

1
2
<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>
cs











참고자료


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

http://infodbbase.tistory.com/41







반응형

'개발 > React.js' 카테고리의 다른 글

[React.js] 0. Self Study  (0) 2021.07.19
[React.js] 3. Element Rendering (엘리먼트 렌더링)  (0) 2021.07.19
[React.js] 2. JSX란  (0) 2021.07.18
[React.js] 1. Hello World  (0) 2021.07.18
[React.js] React 시작하기  (0) 2018.12.26