컴포넌트(Component) - 클래스 VS 함수

함수형 컴포넌트(Function Component) VS 클래스형 컴포넌트(Class Component) 

 

 

<클래스형 컴포넌트>  

1. class 키워드 필요 
2. Component로 상속을 받아야한다. 
3. render() 메소드가 반드시 필요하다. 
4. state, lifeCycle 관련 기능사용이 가능하다. 
5. 함수형보다 메모리 자원을 더 사용한다. 
6. 임의 메소드를 정의할 수 있다.

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

class MyComponent extends Component{
    render(){
        const {name, favoriteNumber, children} = this.props; // 비구조화 할당
        return(
            <div>
                안녕하세요 제 이름은 {name} 입니다. <br />
                children 값은 {children}
                <br />
                제가 좋아하는 숫자는 {favoriteNumber}  
            </div> 
        );     
    }  
}


MyComponent.defaultProps = {
    name: '기본 이름'
};
MyComponent.propTypes = {
    name: PropTypes.string, 
    favoriteNumber: PropTypes.number.isRequired

}

export default MyComponent;

 

< 함수형 컴포넌트> 
1. state, lifeCycle 관련 기능사용 불가능하다. [Hook을 통해 해결] 
2. 클래스형보다 메모지 자원을 덜 사용한다. 
3. 컴포넌트 선언이 편하다.

 

import PropTypes from 'prop-types'; 


const MyComponent =({name, favoriteNumber, children}) => { 
    return(
        <div>
            안녕하세요 제 이름은 {name}입니다 <br />
            children값은 {children}
            <br />
            제가 좋아하는 숫자는 {favoriteNumber}입니다. 
        </div> 
    ); 
}; 


MyComponent.defaultProps = {
    name : '기본 이름',   
};  
MyComponent.propTypes = {
    name: PropTypes.string,
    favoriteNumber : PropTypes.number.isRequired  
}

export default MyComponent;