반응형
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
반응형
'React' 카테고리의 다른 글
[React] React 기본 코드 (0) | 2023.11.08 |
---|---|
[React] React Props (1) | 2023.10.20 |
[React] React Component (2) | 2023.10.15 |
[React] React Element (0) | 2023.10.15 |
[React] React 기초 (0) | 2023.10.13 |