import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
class Input extends PureComponent {
constructor(props) {
super(props);
this.setRef = this.setRef.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { name, onChange } = this.props;
if (onChange) {
onChange(name, e.target.value);
}
}
componentDidMount() {
if (this.props.autoFocus) {
this.ref.focus();
}
}
setRef(ref) {
this.ref = ref;
}
render() {
const { errorMessage, label, name, value, type, onFocus } = this.props;
return (
<label>
{label}
<input
id={`input_${name}`}
ref={this.setRef}
onChange={this.handleChange}
onFocus={onFocus}
value={value}
type={type}
/>
{errorMessage && <span className="error">{errorMessage}</span>}
</label>
);
}
}
Input.propTypes = {
type: PropTypes.oneOf(['text', 'number', 'price']),
name: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
errorMessage: PropTypes.string,
label: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
autoFocus: PropTypes.bool,
};
export default Input;
PropTypes를 이용해서, props 데이터형을 체크할 수 있다.
타입스크립트를 별도로 쓰는 이유는 무엇?