[React] React Hook

Hook

• React 16.8 부터 추가된 React 요소
• React 또는 React Class형 Component에서 이용하던 코드를 작성할 필요없이 함수형 Component에서 다양한 기능을 사용할 수 있게 만들어준 Library
• Class 없이 React를 사용할 수 있게 해주는 함수
• 함수 컴포넌트에서 React State와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수
• 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 Hook을 사용
• use라는 키워드로 시작

---

Hook 특징

• 서로 비슷한 동작을 하는 것을 작은 함수z 묶음으로 컴포넌트를 나눌수 있음
• 함수형 Component에서만 사용 가능
• 비동기 방식(async)
• Class없이 React 기능들을 사용하는 방법 제시

---

Hook 사용 규칙

• 최상위 에서만 Hook 호출해야 함 (반본문이나 조건문, 중첩함수 내에서 Hook을 호출하면 안됨)
• React 함수 내에서만 호출해야 함
  • 일반 자바스크릡트 함수에서는 Hook을 호출해서는 안됨
  • Hook을 호출 할 수 있는 곳은 직접 작성한 custom Hook내에서 가
• 규칙 관련 extension : https://www.npmjs.com/package/eslint-plugin-react-hooks