##React
- facebook이 만든 view engine
- MVC패턴에서 V만 담당
- JSX
- Component Base
- facebook.github.io/react
- https://github.com/facebook/react/wiki/Sites-Using-React
- 버전업이 빠르다.
##사용처
- instaram
- airbnb
- coupang(실시간 호텔예약)
##React 처음 적용 시 문제점
- 환경설정 문제
- 개발시 build 문제점(대략 8초)
- deploy process문제
- ie7(지원x)
- (react는 서비스 적용 후 걷어내는것이 간편하다)
- win7과의 호환성
##적용과정
- 해외와 통신을 하기 때문에 Async Client Side Rendering으로 뺴야했다
- 반복되는 화면 요소를 하나의 소스(?)로 적용 가능하다.
- 의존성 추적이 가능해서 리팩토링이 편하다.
- ESLint
- props 로 넘기는 노가다가 있지만, 나중에 데이터 흐름 파악하기가 쉽다
##적용 후 장점
- Client와 Server의 완전한 분리
- Component Tree구조로 인해 고쳐야하는 부분이 명확해지고 재사용이 수월하다.
- propTypes: propTypes를 통해 잘못된 데이터형의 흐름을 방지할 수 있다(like jQuery's vaildate)
- 소스 가독성이 좋다.
-- ###팀개발자의 요구사항
- 상식적이고 모던하게 개발하자
- 요새 좋은 도구가 많으니 우리도 써보자
- IE7드랍시키자
-- ###프로젝트 후 팀원들이 느낀점 좋은점
- state와 props를 통해서만 데이터 흐르므로 흐름파악이 편했다
- propTypes를 통한 type checking
- 일관된 this context
- state update시 알아서 화면이 바뀌니 rendering을 신경쓸 부분이 줄어들었다.
- 자연스럽게 팀 내 코딩컨벤션이 생김
- 코드 퀄리티가 좋아짐
- 팀 내 다른 개발자가 작성한 component를 가져다 쓰기가 편하다.
아쉬운 점
- 익혀야 할 기술이 많고, 개념전환이어렵다(component based, server side rendering -> client rendering)
- 개발할 때 서버를 두대 띄워야 한다.
- 간단한 DOM조작으로 해결될 문제도 복잡하게 처리해야하는 경우도 생김
- input 처리
- 0.14 기준 react가 자동으로 span을 만들어서 공용css에 span이 걸려있으면 side effect가 생긴다.
- build에 사용된 npm modules의 완성도가 떨어져 삼질을 했다는 경우가 있음(어느날 갑자기 빌드가 안됨)
- windows7 호환성
##Tips
- window7개발환경문제(경로가 길면 인식이 안됨, npm2.x.x에서 발생하기 때문에 npm3.x.x를 써야함)
- 그럼에도 불구하고 일부 모듈은 win7에서 정상동작을 안하는 경우가 있다.
- Client Side Rendering의 숙명(화면깜빡임)... server side rendering하는 곳에서wire frame이라도 잡아주는 것이 좋다