[React Hook] 1. Hook 소개

출처 공식문서 : Hook의 개요 – React (reactjs.org)

 

1. Hook 필요 이유

(1) 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
   > 하위 컴포넌트에서 상위 컴포넌트의 state 를 받기 위해 render props 등을 사용했다.
(2) 복잡한 컴포넌트들
   > componentDidmount 같은 생명주기 메서드가 데이터를 불러오기도 하지만
     이벤트 리스너를 설정하는 것과 같은 다양한 로직이 포함되기도 했다.
     이러한 컴포넌트들은 쪼개고 테스트 하기가 어려웠다. 
     그래서 별도의 상태 관리 라이브러리와 함께 결합해서 사용하기도 했다.

     Hook은 생명주기 메서드를 기반으로 쪼개는 데 초점을 맞추기보다
     로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있도록 초점을 맞추었다. 

(3) class는 어렵다.
   > this가 혼동되는 등 많은 진입장벽이 있었다.

 

2. 점진적 적용 전략

> React로부터 Class를 제거할 계획은 없다.
  이미 존재하는 코드와 함께 그대로 이용할 수 있다.
  하지만 새롭게 만드는 것들은 Hook으로 만드는 것을 권장한다.