리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다.
기존의 개발방식은 일반적으로 함수형 컴포넌트를 사용하고 state이나 Life Cycle method필요로 할 때에만 클래스형 컴포넌트를 사용하는 방식이었습니다.
언제 클래스 컴포넌트를 사용하고 언제 Functional 컴포넌트를 사용할까요?
Component 에서 state 또는 life cycle methods 를 필요로 한다면 Class component를 사용하고 그렇지 않다면 Functional component를 사용할 수 있습니다.
클래스형 컴포넌트가 함수형 컴포넌트에 비해 가지는 단점 때문입니다.
1. 코드가 길고 복잡합니다.
constructor, this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어집니다.
JAVA처럼 OOP(Object-oriented programming)의 테크닉을 수려하게 적용하지는 않으면서도 근본은 클래스 의 모습을 띄고 있죠.
클래스 자체가 Life Cycle method로 인해 기본적으로 뚱뚱합니다.
2. Logic의 재사용이 어렵습니다.
클래스형 컴포넌트에서는 High-Order Components(HOC)로 컴포넌트 자체를 재사용 할 수는 있지만 부분적인 DOM 관련 처리나 API사용 및 state을 다루는 등의 logic에 있어서는 경우에 따라 같은 로직을 2개 이상의 Life Cycle method에 중복해서 넣어야하는 등 재사용에 제약이 따릅니다.
이에 반해 hooks를 활용한 함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후(hook) 필요한 곳에 훅 집어 넣어주기만 하면 되기 때문에 로직의 재사용이 가능해집니다.
컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다.
React는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토어에 컴포넌트를 연결하는 것) 만약 이전부터 React를 사용해왔다면, 이것을 해결하기 위해 render props 그리고 고차 컴포넌트와 같은 패턴에 익숙할 것입니다. 그러나 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게 만듭니다.
3. 복잡한 컴포넌트들은 이해하기 어렵습니다.
우리는 때론 간단하게 시작했지만 유지하기 힘든 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지해야합니다. 각 생명주기 메서드는 자주 관련 없는 로직이 섞여 있습니다.
4. Class은 사람과 기계를 혼동시킵니다.**
Class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이라는 것을 알게 되었습니다. Javascript에서 어떻게 this가 작동하는지 알아야만 했고, 대부분의 다른 언어와는 다르게 작동합니다. 이벤트 핸들러가 등록되는 방법을 기억해야만 합니다. 불안정한 문법 제안들이 없다면, 코드는 매우 장황해집니다.
출처: https://ko.reactjs.org/docs/hooks-intro.html#___gatsby
https://codingbroker.tistory.com/23
