React ) Class 형 보다 Hook(함수) 형을 권장하는 이유

React 공식 문서에서는 Class 보다 Hook 을 사용할 것을 권장하고 있습니다.

학습 동기부여를 위해(?) 왜 그런지 살펴보기로 했습니다.

---

Hook 이 해결한 문제들

1. 컴포넌트 사이에서 상태 로직을 재사용하기가 어렵다.

React 는 컴포넌트간에 재사용 가능한 로직을 연결하는 방법을 제공하지 않습니다. render props 나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결할 수 있습니다.
하지만 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 합니다.

Hook 을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있기 때문에 이를 이용한 독립적인 테스트와 재사용이 가능합니다.
Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.

2. 복잡한 컴포넌트들을 이해하기 어렵습니다.

간단하게 시작했지만 관리하기가 힘들어지는 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지보수해야합니다.
각 생명주기 메서드에는 관련없는 로직이 자주 섞여들어갑니다.

예시로 componentDidMount 는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할 때 사용되어야 하지만, 같은 componenetDidMount 에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 합니다.

함께 변경되는 상호 관련 코드는 분리될 수 있지만, 연관이 없는 코드들은 단일 메서드로 결합됩니다. 이로 인해 버그가 쉽게 발성하고 무결성을 너무나 쉽게 해치게 됩니다.

이러한 문제를 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는 것 보다는 Hook 을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.

또한 이러한 로직의 추적을 쉽게 할 수 있도록 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있습니다.

3. Class 는 사람과 기계를 혼동시킵니다.

React 에서는 Class 의 사용을 위해서는 JavaScript 의 this 키워드가 어떻게 작동하는지를 알아야 합니다.
JavaScript 의 this 키워드는 대부분의 다른 언어에서와는 다르게 작동하기 때문에 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만들었습니다.

이는 코드를 매우 장황하게 만들었습니다. 숙련된 React 개발자들 사이에서도 React 내의 함수와 Class 컴포넌트의 구별, 각 요소의 사용 타이밍 등은 의견이 일치하지 않았습니다.

이러한 문제를 해결하기 위해 Hook 은 Class 없이 React 기능들을 사용하는 방법을 제시했습니다.

---

역시 왜 쓰는지 알아야 의욕이 생깁니다.