react
jsx
기존 방식과 비교
1 | // 리액트 엘리먼트 |
2 | React.createElement(ElementName, {list:[...]}) |
3 | // JSX |
4 | <Elementname list={[...]}/> |
className
1 | // class는 javascript의 예약어 이므로 calssName을 쓴다 |
2 | <h1 className="someClass">some content</h1> |
자바스크립트 식
1 | // 중괄호 안에서 자바스크립트 식을 쓸 수 있음 |
2 | <h1>{this.props.name}</h1> |
3 | // 문자열이 아닌 다른 타입의 값도 자바스크립트 식안에 넣어야함 |
4 | <input type="checkbox" defaultChecked={false}> |
프로퍼티 검증
리액트에는 자동 프로퍼티 검증 기능이 있었는데
15.5 부터는 React.PropTypes가 별도의 패키지로 분리되었다
1 | # 패키지 설치 |
2 | $ npm install --save prop-types |
사용법
1 | const Summary = createClass({ |
2 | displayname: 'Summaray', |
3 | // 프로퍼티 타입 지정 |
4 | propTypes: { |
5 | name: PropTypes.string, |
6 | //필수값 |
7 | list: PropTypes.array.isRequired, |
8 | //커스텀 검증기 |
9 | title: (props, propName) => |
10 | (typeof props[propName] !== 'string') ? |
11 | new Error("title은 문자열이어야 합니다.") : |
12 | (props[propName].length > 20) ? |
13 | new Error("제목은 20자 이내여야 합니다.") : |
14 | null |
15 | }, |
16 | // 값이 없을때 초기화 |
17 | getDefaultProps() { |
18 | return { |
19 | name: 'noname', |
20 | list: [] |
21 | } |
22 | } |
23 | render() { |
24 | //... |
25 | } |
26 | }) |
ES6 클래스 or 상태없는 함수형 컴포넌트
1 | class Summary extends React.Component{...} |
2 | // const Summary = (...) => {...} |
3 | Summary.propTypes = {...} |
4 | Summary.defaultProps = {...} |