React Hooks 이란

https://ko.wikipedia.org

<"리액트를 다루는 기술" 책 참조>

---

리액트 훅(React Hook)?

- 훅은 리액트 v16.8에 새로 도입된 기능
- 함수 컴포넌트에서 리액트 state와 라이프사이클 기능을 "연동" 할 수 있게 해주는 함수.

- 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능

- 기존 함수현 컴포넌트에서 못하던 상태값 관리, 컴포넌트의 라이프사이클 함수를 이용할 수 있게 됨.

 

훅이 나오게 된 이유?

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠음 - 중복된 코드가 늘어남
• 로직이 UI 및 리액트 라이프사이클에 너무 밀접하게 결합되어 있음 - 중복된 코드가 늘어남
• 중복된 코드를 줄이기 위해 HOC(Higher Order Component) - 화면에서 재사용 가능한 로직을 분리해서 컴포넌트로 만들고, 재사용 불가능한 UI와 같은 다른 부분들을 parameter로 받아서 처리하게 됨.
• wrapper의 depth가 깊어지고 복잡한 컴포넌트들은 이해하기 어렵고 테스트하기도 어려워짐.
• Class는 사람과 기계를 혼동시킴.

 

훅이 나왔으니 Class형 컴포넌트는 사라질까?

React로부터 Class를 제거할 계획은 없다.

현재 존재하고 있는 모든 Class 사례를 변경하고 싶지만, 미래에도 계속 Class 컴포넌트들을 지원할 예정입니다. 페이스북에서 수만 개의 Class 컴포넌트들을 작성했으며, 그들을 재작성할 계획이 전혀 없습니다. 대신에, 새로운 코드에서 기존 코드와 나란히 Hook를 사용할 계획입니다.

 

훅의 장점

- 작성해야 할 코드가 줄어듦

- 가독성이 좋아짐

- 재사용 가능한 로직을 쉽게 만들 수 있음

- 정적 타입 언어로 타입을 정의하기 쉬움