[React] Hook이란 무엇인가?

react

Hook 이란?

Hook은 React 16.8에 새로 추가된 기능입니다. 
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

[react reference]

Hook은 class 없이 React 기능들을 사용하는 방법을 제시
→ Hook을 통해 function component에서 state와 lifeCycle 사용 가능

---

Hook 사용 시 장·단점

장점(function component)	단점(class component)
계층의 변화 없이 상태 관련 로직을 재사용할 수 있음	컴포넌트 사이에서 상태 로직을 재사용하기 어려움
작은 함수의 묶음으로 컴포넌트를 나누어 사용가능	복잡한 컴포넌트들은 (사람이)이해하기 어려움
Class없이 React 기능들을 사용가능	Class은 사람과 기계를 혼동시킴

---

Hook의 규칙

최상위(at the Top Level)에서만 Hook을 호출해야 함

 React 함수 내에서 Hook을 호출해야 함

---

Hook의 특징

선택적 사용 - 일부의 component에서만 hook을 사용해도 무방

이전 버전과의 100% 호환성

---

요약

Hook이란 class component에서 사용하는 'state', 'lifeCycle' 을 function component에서 사용할 수 있도록 해준다. 

state는 useState()로 사용 가능,
lifeCycle는 useEffect()로 사용 가능하다.

여기서 말하는 useState(), useEffect()가 Hook이다. 
[Hook은 개인이 만들 수도 있기 때문에 종류가 다양하다.]

---

참고자료

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React