Hooks

1-1. Hooks?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다.

• hook은 class안에서는 동작하지 않는다.

• 대신 class 없이도 React를 사용할수있게 해주는것.

• React 보다는 usestate같은 내장된 hook을 몇가지 제공한다.

• 컴포넌트 같에 상태관련 로직을 재사용 하기위에서 hook을 직접만드는것도 가능

1-2. 왜 사용하나요?

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다. (HOC, render props)

• Class은 사람과 기계를 혼동시킵니다.

• 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)
  

1-3. Class형 컴포넌트 vs Function 컴포넌트

:: 클래스형 컴포넌트?

• state, 라이프 사이클 때문에 사용

• 마치 생명체처럼 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음

• 반면 함수는 한번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능

1-4. Hook 사용 규칙

• 규칙 1: 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

• 규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)