Component 실제 사용방법

import: (ES6문법), 모듈을 불러오는 키워드
import MyComponent from ‘./MyComponent’;

export: 모듈 내보내기
export default MyComponent;

 

<데이터종류>

props

• 부모컴포넌트에서만 설정할 수 있는 데이터 값.
• 자식에서는 읽기전용.

-> props 기본 값 설정: defaultProps

static defaultProps = {
	name: ‘기본 이름’
}

-> props 검증: propTypes & 필수 propTypes 설정

import PropTypes from ‘prop-types’; //import 추가
//name props 타입을 string으로 설정
static propTypes = {
		name: PropTypes.string, //name props 타입을 string으로 설정
		age: PropTypes.number.isRequired //age props 타입은 number, 필수로 설정
}
// **해당 컴포넌트에 어떤 Props 가 필요한지 표시해주는 것이 좋음**

state

• 컴포넌트 내부에서 선언하며, 내부에서만 사용하는 데이터로, 값을 변경할 수 있다.

동적인 데이터를 다룬다.

• 부모의 state는 자식의 props가 된다.

-> 컴포넌트의 생성자 메소드: constructor()를 이용하여 state초기값을 설정할 수 있지만,

transfrom-class-properties문법으로 constructor 바깥에서 정의 가능하다.