클래스형 컴포넌트
- 라이프사이클 메서드 사용 가능
- 임의 메서드 정의 가능
- 반드시 render 메서드를 통해서 JSX로 작성된 내용을 렌더링 해주어야 함
함수형 컴포넌트
- 클래스형에 비해 선언이 좀 간편하고 메모리 자원을 적게 사용한다는 장점이 있음
- 과거에는 state 및 라이프사이클 메서드를 사용할 수 없다는 단점이 있었지만 리액트 훅의 도입으로 해결됨
state
클래스형 컴포넌트
- constructor 내에서 this.state로 초기값을 설정 가능
- constructor없이도 state = {}로 초기값을 설정 가능
- this.setState()를 사용해 state값을 변경
- state는 객체형식으로 관리
함수형 컴포넌트
- useState hook을 사용해 state 사용
- useState hook 호출 시 배열을 반환하는데, 첫 번째 요소는 state 값, 두 번째 요소는 state를 변환하는 함수로 사용된다
this
클래스형 컴포넌트
- state나 props 등 내부의 요소를 불러와 사용할 때 this.를 사용해야 한다
- 함수를 선언할 때 바로 화살표함수로 선언할 수 있으며, 이를 jsx 내에서 사용할 때에도 this.가 필요하다
함수형 컴포넌트
- 함수를 선언할 때 const를 사용해 선언하며, 이후 호출 시 별도의 this가 없어도 된다
life cycle
클래스형 컴포넌트
- 라이프사이클 메서드 사용
- render 메서드를 통해 jsx 반환
함수형 컴포넌트 - 리액트 훅을 사용해 라이프사이클 메서드의 역할을 어느정도 대체
- return으로 바로 jsx 반환
