1) React의 컴포넌트 종류는 두가지이다.
함수형 컴포넌트
state와 Lifecycle을 사용할 수 없었으나, 리엑트 v16.8 이후 Hooks을 이용하여 사용이 가능해지게 되었다.
함수형 컴포넌트
함수형 컴포넌트를 선언 시 function을 사용하는 것과 화살표 함수 문법을 사용하는 것은 큰 차이가 없으며, 화살표 함수가 조금 더 간결하다.
어떠한 방식을 선택할 지는 단지 각자의 취향에 달려있다.
/*방법 1.*/
function MyComponent(){ return }
/*방법 2.*/
const MyComponent = () => { return }
function Example(){
this.name = "가나다”;
return {
name : ‘라마바’
, con1 : function() { console.log( this.name + “입니다.” ); }
, con2 : () => { console.log( this.name + “이에요,” ); }
}
}
const a = new Example();
a.con1; // 라마바입니다.
a.con2; // 가나다이에요,
// 안녕하세요 Koboolean입니다.
/* 부모 */
<MyComponent name = “Koboolean” />
/* 자식 */
const MyCompoent = props => { return <h1>안녕하세요 {props.name}입니다.</h1> }
const MyComponent = props => { return <h1> 안녕하세요 {props.name}입니다.}
MyComponent.defaultProps = { name : “디폴트” }
/* 부모 */
<MyComponent > Koboolean </MyComponent>
/* 자식 */
const MyComponent = props => {return <h1>안녕하세요 {props.children}입니다.</h1>}
/* 방법 1 */
const MyComponent = props => {
const {name, children} = props;
return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}
/ *방법 2 */
const MyComponent = ({name, children}) => {
return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}
import PropTypes from ‘prop-types’;
const MyComponent = ({name, children}) => {
return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}
// name을 문자열 타입으로 지정한다.
MyComponent.propTypes = { name : PropTypes.string }
MyComponent.propTypes = { name : PropTypes.string.isRequired }
class MyComponent extends Component {
render(){
const { name , children } = this.props;
return( <div>안녕하세요 {name}님 children 값은 {children}입니다. </div> )
}
}