Hook?

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

• Hook은 class내에서는 동작하지 않는다.
• 대신 class없이 React를 사용할 수 있게 해주는 것이다.
• React는 useState같은 내장 Hook을 몇 가지 제공한다.
• Component간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(Custom Hook)도 가능하다.
  
  

Why Hook?

• Component 사이에 상태와 관련된 로직을 재사용하기 어렵기 때문에 사용한다.
• 복잡한 Component들을 이해하기 어렵기 때문에 사용한다.
• Class는 사람과 기계를 혼동시킨다.
  
  

Class Component & Function Component

Class Component?

• State, 라이프 싸이클 때문에 사용
• 마치 생명체처럼 Class로부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있다
• 반면 함수는 한번 호출되고 메모리상에서 사라진다.

Function Component (Closure)

• 2018년 React v16.8 Hook 첫 배포
• Class의 단점들을 보완한 Function Component가 배포된 후 자주 사용된다.
  
  

Hook 사용 규칙

규칙 1

• 최상위(at the top level)에서만 Hook을 호출해야 한다.
• 반복문, 조건문, 중첩된 Function내에서 Hook하지 말 것 ❌

import React, { useState } from 'react'

function Hooks(props) {
  if (!props.isExist) {
    const [state, setState] = useState(); // Error!
  }
  
  const [state, setState2] = useState(); // Error!
}

규칙 2

Function Component내에서만 Hook을 호출해야 한다. 일반 JavaScript Function에서는 Hook을 호출해서는 안된다.

Hook 사용 규칙을 지켜야 React가 각 Hook의 상태를 제대로 기억할 수 있다. Hook은 규칙 2에 의해 Class형 Component의 Method뿐만 아니라 기타 일반 함수에서도 사용할 수 없다. Function Component을 위한 기능이기 때문이다.