- React - A JavaScript library for building user interfaces
- Electron - Build cross platform desktop apps with web technologies
- Airbnb JavaScript Style Guide - A mostly reasonable approach to JavaScript
- JavaScript Standard Style - One Style to Rule Them All
- Babel.js - Use next generation JavaScript, today.
- Jest - Painless JavaScript Unit Testing
- ESLint - ES6 코딩 스타일 가이드
- React and ES6 - [블로그] The usage of React with ECMAScript6
- React 개요 - [블로그] React를 이해하다
- React Unit Test - [블로그] React 컴포넌트를 테스트하는 세 가지 방법
- 아톰 설치 - atom.io
- 노드 설치 - nodejs.org
- 파일 구성 및
package.json작성 - 모듈 설치 -
npm install - 개발 환경 작동 확인 및 React 컴포넌트 맛보기
Part 2, ES6 문법과 React 기본 속성
- JSX 이해하기 - JSX
- ES6 Class 문법
- React State 개념
- React Props 개념
- React Refs 개념
Part 3, ES6 문법과 React 생명주기 메소드
- 추가적인(Optional) 속성들:
- Statics: 정적 메소드 제공
- propTypes: 자체적 Unit 테스트 수행 ES6에서는 사용법이 조금 다름
- defaultProps: 컴포넌트의 기본 프로퍼티
- Context: 실험적 고급기능, 전역 변수와 같은 기능, 데이터 흐름을 파악하기 함들어
- Event Handling: 상호 작용에 대한 이해
- ES6 개발 환경 구성 - React on ES6+
- ES6 코딩 스타일 가이드 및 환경 구성- ESLint
- ES6 Import 문법 사용
- ES6 스프레드 어트리뷰트(
…) 문법 사용
- DOM event를 DOMd에 직접 바인딩 할 필요 없다. 컴포넌트 Handler 사용
- DOM 선택자 사용할 필요 없다. Virtual DOM 사용
- DOM 스토리지에 의존할 필요가 없다. Props 사용
- show/hide와 같은 상태성 코드를 작성할 필요없다. State 사용
- 컴포넌트의 속성 이름에 (
_)를 이용하여 Private으로 구분할 필요가 없음, 자체적으로 Private으로 취급함 - 생명주기 메소드는 기존의 UI스크립트와 융합하기 좋은 장소
- HTML 코드를 자바스크립트로 직접 만들어 낼 필요가 없다. Render에 의해 자동화
- 기존 HTML 및 CSS를 Virtual DOM으로 작성하는 습관이 필요함
- React의 Form에 대하여
- Render는 하나의 요소만 반환
- 생명주기 메소드 순서 암기
- React는 state 머신이다
props는 컴포넌트의 데이터이며 부모에 의해 관리된다- 자식 컴포넌트는 부모의 그 어떠한 것에도 접근 할 수 없다.
- 컴포넌트는 렌더에 정의된 계층에의해 소유관계가 형성된다.
state와props를 잘못 구분해서 사용하면 성능에 큰 영향을 주기 때문에 신중하게 판단state는 자신이 스스로 값을 변경할 수 있지만, 부모에서refs속성으로 접근하여 변경할 수도 있다.state나props가 변경되면render메소드가 자동으로 호출됨- ES6과 JSX의 호환성이 좋다. 특히 ES7의 Decorator와 잘 어울린다.
- React 컴포넌트는 우리가 일반적으로 생각하는 클래스와 다름
- React 컴포넌트는 자식들간에 통신할 수 없으며 부모를 통해서만 통신
mixins기능을 제공하지만 이것은 단순히 공통 메소더를 공유하려는 목적일 뿐- React 코드를 읽을 때 완벽한 ES6 환경에서 작성된 것인지, 브라우저에서 구현된 ES2015단계에서 작성된 인지, ES5로 작성된 것인지를 인지할 수 있어야 함
componentWillMount- 최초 렌더링이 일어나기 직전에 클라이언트 및 서버에서 한번 호출, ES6에서는constructor에서 처리componentDidMount- 최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출componentWillReceiveProps- 컴포넌트가 새로운props를 받을 때 호출, 이 메소드는 최초 렌더링 시에는 호출되지 않음shouldComponentUpdate- 새로운props또는state를 받아 렌더링을 하기 전에 호출componentWillUpdate- 새로운props나state를 받았을 때 렌더링 직전에 호출, 최초 렌더링 시에는 호출되지 않음componentDidUpdate- 컴포넌트의 업데이트가 DOM에 반영된 직후에 호출, 최초 렌더링 시에는 호출되지 않음componentWillUnmount- 컴포넌트가 DOM에서 마운트 해제 되기 직전에 호출
- ES6 Lint를 통해 배우는 코드 스타일
- Jest를 이용한 유닛 테스트 환경 구성
- Webpack을 이용한 빌드 및 개발 환경 설정