[React - 4] Hook

Hook

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

 

1. React 16.8 버전 (2019년도) 에 추가된 공식 라이브러리
2. Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능
3. 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장
4. 단, 기존의 Class형 컴포넌트들을 Hook을 이용한 Function형 컴포넌트로 refactoring할 이유는 전혀 없음

---

Why do you need it?

hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에

클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있어 필요하다.
공식홈페이지에 따르면 Hook을 만든 이유는 다음과 같다.

 

1. 컴포넌트 사이에서 상태 로직 재사용의 어려움 -> render props, HOC 등
2. class의 문법과 복잡한 (클래스형) 컴포넌트들은 이해하기 어려움 -> 각종 생명주기 함수들
3. reloading의 신뢰성이 떨어진다.

4. 최신 기술의 적용이 효과적이지 않다.

5. 축소가 어렵다.

 

이러한 클래스의 단점들을 함수형 컴포넌트로 커버할 수 있다.

하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다.

이를 해결하기 위해 Hook이 등장했다.