[ React ] Class Component

@ https://jistol.github.io/frontend/2018/12/03/react-proptypes/

 

React Component의 prop값을 검증하기 위해 PropTypes를 이용하여 값을 지정할 수 있습니다.
React v15.5부터 다른 패키지로 변경되었는데 ‘prop-types’라이브러리를 사용하라고 권고하고 있습니다.

 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Foo extends Component {
  ...
  
  static propTypes = {
    strArg : PropTypes.string,            
    numArg : PropTypes.number.isRequired   
  }
}

PropTypes의 종류

PropTypes으로 설정할 수 있는 종류는 아래와 같습니다.

kinddescription

array	배열
bool	true/false
func	함수
number	숫자
object	객체
string	문자열
symbol	심벌 개체(ES6)
node	렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment)
element	React element
instanceOf(ClassName)	JS에서 instanceof로 정의 가능한 클래스 인스턴스
oneOf([…Value])	포함된 값들중 하나.(ex: oneOf([‘남자’,’여자’]))
oneOfType([…PropTypes])	포함된 PropTypes들중 하나. (ex: oneOfType([PropTypes.string, PropTypes.instanceOf(MyClass)]))
arrayOf(PropTypes)	해당 PropTypes으로 구성된 배열
objectOf(PropTypes)	주어진 종류의 값을 가진 객체
shape({key:PropTypes})	해당 스키마를 가진 객체.(ex:shape({name:PropTypes.string,age:PropTypes.number}))
exact({key:PropTypes})	명확하게 해당 스키마만 존재해야함.

static propTypes = {

bottomSet: PropTypes.number,

};



static defaultProps = {

bottomSet: 11,

};

https://beomy.tistory.com/22

 

@ import, export ,require , module 

 

@ Export 

Named exports

export { myFunction };

export const foo = Math.sqrt(2);

Named exports는 여러값을 export 하는데 유용합니다. export 된 이름을 사용하여 import 하여 사용할 수 있습니다.

 

Default exports

export default myFunctionOrClass // 여기에는 세미콜론이 없습니다

모듈 당 딱 한 개의 default export만 있어야 합니다. default export로 객체, 함수 클래스 등이 될 수 있습니다. 

가장 간단하게 export 할 수 있으며, 딱 한개만 default export를 할 수 있기 때문에, "메인" 이라고 할 수 있는 것을 default export 하는 것이 좋습니다. 단일 값이나 모듈에 대한 대체 값을 export 하는데 default export를 사용해야 합니다.

 

@ Import

 

import name form"module-name";
import * as name from"module-name";
import { member } from"module-name";
import { member as alias } from"module-name";
import { member1, member2 } from"module-name";
import { member1, member2 as alias2, [...] } from"module-name";
import defaultMember, { member [, [...]] } from"module-name";
import defaultMember, * as alias from"module-name";
import defaultMember from"module-name";
import"module-name";