Hooks 이전
컴포넌트 내부적으로 유지하고 변경되는 상태가 있다면 class component
컴포넌트 내부에 상태가 없다면
1. 라이프 사이클을 사용해야 한다면? class component
2. 라이프 사이클에 관계 없다면? function component
Hooks 이후
class 와 function 을 위의 기준으로 나누고 있지 않다.
babel 까지 CDN 으로 추가 된 상태.
// class component 정의 방법
class ClassComponent extends React.Component {
render() {
return <div>Hello</div>;
}
}
// 사용
ReactDOM.render(
<ClassComponent />,
document.querySelector('#root')
)
// function component 정의 방법
// 방법 1
function FunctionComponent() {
return <div>Hello</div>;
}
// 방법 2
const FunctionComponent = () => <div>Hello</div>;
// 사용
ReactDOM.render(<FunctionComponent/>, document.querySelector('#root'))