1. 선언방식
- 함수형
state, lifeCycle 관련 기능사용 불가능하다(Hook으로 해결).
클래스형보다 메모지 자원을 덜 사용한다.
컴포넌트 선언이 편하다.
- 클래스형
class 키워드 필요
Component로 상속을 받아야한다.
render() 메소드가 반드시 필요하다.
state, lifeCycle 관련 기능사용이 가능하다.
2. State
- 함수형
useState 함수로 state를 사용한다.
useState 함수를 호출하면 배열이 반환된다.[현재 상태, 변환함수]
- 클래스형
constructor 안에서 객체 형식으로 this.state 초기 값 설정 가능
this.setState() 를 통해 state값을 변경
3. props와 이벤트핸들링
- 함수형
props를 불러올 필요 없이 바로 호출 할 수 있다.
const + 함수 형태로 선언해야 한다.
요소에 적용할때 this가 필요없다.
- 클래스형
this.props로 통해 값을 불러올 수 있다.
함수 선언시 화살표 함수로 바로 선언 가능하다.
요소에 적용할때 this.를 붙여줘야한다.
4. LifeCycle
- 함수형
Hook를 사용하여 생명주기에 원하는 동작을 한다.
useEffect() 이용
- 클래스형
그리기 → render
그리고 난 뒤 → componentDidMount
그리고 난 뒤 변경 → componentDidUpdate
그리고 난 뒤 사라짐 → componentWillUnmount
출쳐:born-dev/tisory
