[React] 리액트 Hook이란?

🙄 Hook 란?

Hook 은 리액트 v16.8에 새로 도입된 기능이다. v16.8 이전에는 함수형 컴포넌트에서는 상태를 관리할 수 없었다. 리액트 v16.8에서 함수 형태의 컴포넌트에서 상태 관리를 위해 사용되는 몇가지 기술을 Hook이라고 부른다.
함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

그 전에,

🤔 왜 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까?

리액트 컴포넌트에서는 클래스형 컴포넌트(class component)와 함수형 컴포넌트(function component)로 나뉜다.
클래스형 컴포넌트는 함수형 컴포넌트에 비해 가지는 단점들이 몇가지 있다.

• 클래스 문법이 어려움
• 축소가 어려움
• 로직의 재사용이 어려움
• 최신 기술의 적용이 효과적이지 않다

→ 그래서 등장한 것이 함수형 컴포넌트!

그러나, 함수형 컴포넌트만 사용하려고 하는데 클래스형 컴포넌트에서만 사용가능한 state나 Life Cycle Method 를 함수형 컴포넌트에서 사용하지 못하는 문제점 때문에 Hook API가 생겨났다.

정리하자면,

• 리액트 Hook 은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다

• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState나 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하고, 이전 Hook의 변경이거나 특정한 경우에 사용하는 추가 Hooks 들이 있다.

  • 기본 Hook
    • useState
    • useEffect
    • useContext
  • 추가 Hooks
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeHandle
    • useLayoutEffect
    • useDebugValue

Reference

• https://ko.reactjs.org/docs/hooks-reference.html
• https://velog.io/@yangddu/React-Hook