2015년 초반, 실제 서비스에 ReactJS를 적용하며 경험했던 내용들

1. ReactJS 적용 사례
2015. 07. 28
이홍채

2. 재사용 가능한 댓글 Component
많은 동적 업데이트를 빠르게 렌더링
UI구성 요소의 보수에 유리
Why ReactJS?

3. React + Flux

4. browserify - CommonJS 모듈화
npm - 패키지 관리
gulp - build 스크립트
개발, 서비스 환경변수 제어
mvn frontend plugin 연동
Build System

5. List
Comment
Component 구성 예
<CommentWriteForm>
<CommentList>
ㄴ [<Comment>, ...]
<Pagination>
<li>
<CommentHeader>
{content}
<ReplyButton>
<LikeButton>
<DislikeButton>
<ShareButton>
</li>

6. 답글 카운트 표시하는 경우의 예
List (state: comments)
CommentList (prop: comments)
Comment (prop: comment)
ReplyButton (prop: comment.childCount)
State의 변화는 가능한 root component에서만 처리
store의 change 이벤트에 대한 listener 필요
Top-down식 데이터 흐름

7. Component 재사용을 위해서 PC / Mobile rendering
따로 처리
Template 분리
var desktopTemplate =
require('./templates/desktop/Comment.react');
var mobileTemplate =
require('./templates/mobile/Comment.react');
…
render: function() {
return (isMobile) ?
mobileTemplate.bind(this)() :
desktopTemplate.bind(this)();
}
…

8. Template 구현
Template 분리 (cont.)
// template별 rendering 내용
module.exports = function() {
return (
...
);
};

9. Publish - subscribe 패턴을 따로 구현
iframe간에 따로 관리되는 상태의 동기화 필요
Component간 prop 전파 경로가 너무 복잡한 경우
Global Pubsub

10. Internet Explorer
IE 8 : es5-shim, es5-sham 필요
IE 9 이하: console polyfill 필요
호환성 보기 모드: IE 8 이상 항상 최신 표준으로
<meta http-equiv="X-UA-Compatible" content=“IE=edge">
React-router 지원안됨
Android 2.3 이하의 특정 브라우저
es5-shim, es5-sham 필요
브라우저 호환성 문제

11. Store의 데이터 구조로 사용
한번 set 되면 변경되지 않음
변경을 위해서는 새로운 데이터를 할당 (clone & assign)
변경 불가 라서 뭐가 좋은가?
reference 비교(===)로 데이터의 변경 여부 확인 가능
Immutable-js 적용

12. React의 PureRenderMixin 상속
shouldComponentUpdate method에서
shallowEqual 사용하여 빠른 렌더링 가능
Immutable-js 적용 (cont.)

13. 전체 렌더링을 클라이언트에 위임 하면 생기는 문제들
최초 로딩 속도 이슈
검색 엔진 최적화 불가
서버와 클라이언트의 스크립트(component)를 동일하
게 하여 공유 가능
Express등을 사용하여 최초 렌더링을 서버에서 실행
서버와 클라이언트 용도의 일부 로직 분리는 필요
그럴 만한 가치가 있는가? 고민중
Isomorphic

14. child component들의 기본값 및 타입 체크 적용 필요
다른곳에서 재사용되는 component 내부 오류 예방
기본적인 사항이라 처음부터 적용하는게 좋음
참고: https://facebook.github.io/react/docs/reusable-
components.html
Prop Validation / Default Prop Values

15. 전역 CSS 파일을 사용하지 않음
스타일도 Component 단위로 통제
스타일 용도로 class 사용하지 않음
겹치거나 충돌하는 selector에 대한 문제가 없음
단 디자인 - 마크업 업무 패턴에 따라 실행 하기가 어려움
Inline Style

16. https://facebook.github.io/react/
https://facebook.github.io/flux/
http://www.smashingmagazine.com/2015/04/
react-to-the-future-with-isomorphic-apps/
https://speakerdeck.com/vjeux/react-css-in-js
References