리액트 적용기
- 1. DEVIEW2016 리액트 적용기 프론트앤드개발팀 / 송헌용 1
- 2. 2 목차 •개발 결과물 소개 •좋았던 점 •리액트를 선택한 이유 •순수 리액트의 한계 •리덕스의 이점 •어려웠던 점 •복잡한 리액트 개발환경 •마크업 개발자와의 협업
- 3. 3
- 4. 4 좋았던 점
- 5. 5 리액트를 선택한 이유 •리액트 컴포넌트를 통한 메모리 상의 가상 DOM •클래스 - 인스턴스 관계로 뷰를 재활용 •props / state 객체가 변경될 때 그 부분만 렌더링 •리플로우나 불필요한 DOM 조작 최소화 •가상 DOM의 DIFF 체크가 리액트에서 제공되는 핵심
- 6. 6 index.js
- 10. 10 순수 리액트의 한계 •상태 변경을 콜백 함수로 상위 컴포넌트에 전달 •컴포넌트 구조의 깊이가 깊어질수록 콜백 함수 증가 •ex) 카테고리 클릭시 트랙 정렬 •코드 파악이 어려워지면서 유지보수가 힘들어짐
- 11. 11 리덕스 •뷰 컴포넌트 원하는 시점에서 액션을 호출 •액션이 디스페처를 통해 스토어에 있는 데이터를 처리 •해당 데이터를 사용하고 있는 뷰는 자동으로 갱신
- 13. 13 리덕스의 이점 •콜백지옥 없이 데이터 전달 가능 •component와 state가 분리 = 뷰와 모델로 분리 •state는 reducer에서 관리 •component는 stateless가 되므로 순수함수 형태 •페이스북에서 추천하는 패턴
- 14. 14 순수함수 형태
- 15. 15 어려웠던 점
- 16. 16 복잡한 리액트 개발환경-1 •리액트 기본 모듈 •react, react-dom •JSX + ES6을 일반 JS로 변환 •babel-core, babel-loader •babel-preset-es2015, babel-preset-react •리덕스 •redux, react-redux, redux-thunk
- 17. 17 복잡한 리액트 개발환경-2 •모듈 번들링 •require 사용을 위한 webpack •HMR(Hot Module Replacement)사용 •webpack-devserver 개발 서버 •react-hot-loader
- 18. 18 마크업 개발자와의 협업 •뷰가 컴포넌트 단위로 분리 •코드 파악하기 쉽지 않음 •HTML과 JSX의 차이점 •class -> className •for -> htmlFor
- 19. 19 마크업 개발자와의 협업 •뷰가 컴포넌트 단위로 분리 •코드 파악하기 쉽지 않음 •HTML과 JSX의 차이점 •class -> className •for -> htmlFor •마크업 개발자 커밋의 diff 확인 후 •FE 개발자가 JSX를 직접 수정
- 20. 20 정리
- 21. 21 고려해야 할 부분 •리액트가 적용되기에 적절한가? •러닝커브를 극복할 여건이 있는가? •협업을 할 준비가 되어있는가?
- 22. 22 감사합니다