React Hook (훅)

React Hook 이란?

• 함수형 컴포넌트에서 React State와 생명주기 기능(Lifecycle Features)을 연동할 수 있게 해주는 함수이다.

• Hook은 Class형 컴포넌트 안에서는 동작하지 않지만 Class없이 React를 사용할 수 있다.

• Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 해준다.

• Hook을 사용하여 컴포넌트의 상태를 공유하기 쉬워졌다.

Hook을 배우기 전에 알아야할 2가지 규칙

• 반복문이나 중첩된 함수 내에서 Hook을 실행하면 안된다. (최상위 파일에서 훅을 호출해야 한다.)

• 리액트의 함수형 컴포넌트에서만 Hook을 호출해야 한다.

Hook의 등장 배경

• Hook은 Class형 컴포넌트가 가지는 단점을 해결하고자 개발된 것이다.

• Class형 컴포넌트의 단점

  • 코드 구성을 어렵게 만든다.

  • 컴포넌트 사이에서 관련된 로직을 재사용하기 어렵다.

  • 복잡한 컴포넌트들을 이해하기 어렵다.

React Hook의 내장 API

기본 Hook

• useState

• useEffect

• useContext

추가 Hook

• useReducer

• useCallback

• useMemo

• useRef

• useImperativeHandle

• useLayoutEffect

• useDebugValue