React hooks 라이브러리

🔎 React hooks?
: 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능
- React 16.8버전에 추가된 공식 라이브러리
- Function형 컴포넌트에서도 사용 가능
- hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있음 (= 상태관리가 쉬움)
- Custom hook을 이용해 손쉽게 로직 재사용이 가능함

 

1️⃣ hook 규칙

  ◻  최상위에서만 hook을 호출해야 한다. ➡  반복문, 조건문, 함수 등에서 호출 x

  ◻  React 함수에서만 호출해야 한다. (일반 Javascript 함수에서 호출 x)

  ◻  앞에 use를 붙여야 한다.

  ◻  React는 hook이 호출되는 순서에 의존한다. ➡ 순서가 중요함!

 

 

2️⃣ hook 종류

  ◻  useState :  동적 상태 관리

  ◻  useEffect :  컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 함

  ◻  useContext :  필요한 props를 글로벌하게 사용할 수 있도록 함

  ◻  useMemo :  연산한 값 재사용

  ◻  useRef :  DOM선택 / 컴포넌트 안에서 조회&수정할 수 있는 변수 관리

  ◻  useCallback :  특정 함수 재사용