클래스형 컴포넌트의 경우 라이프사이클 메서드를 사용할 수 있고, 임의 메서드를 정의할 수 있다. 또한 반드시 render 메서드를 통해서 JSX로 작성된 내용을 렌더링해주어야한다.
반면 함수형 컴포넌트의 경우 클래스형에 비해 선언이 좀 더 편하고 메모리 자원을 적게 사용한다는 장점이 있다. 과거에는 state 및 라이프사이클 메서드를 사용할 수 없다는 단점이 있었지만 리액트 훅의 도입으로 해결되었다.
2019년 v16.8에서 함수형 컴포넌트를 위한 리액트 훅을 지원하기 전까지는 클래스형 컴포넌트를 주로 사용해왔다. 함수형 컴포넌트에서는 state와 라이프사이클 메서드를 사용할 수 없었기 때문에 프레젠테이셔널 컴포넌트에만 주로 사용되었다고 한다.
프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트
- UI를 그리는 컴포넌트와 데이터를 관리하는 컴포넌트로 나누어 프로젝트를 관리하는 방법.
하지만 현재는 공식문서에서도 함수형 컴포넌트를 사용할 것을 권장하고 있으며, 실제로 사용과 선언이 더 간편하고 메모리 자원을 적게 사용한다는 이점도 있다.
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 반환.
