Hook

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

• Hook은 class 안에서는 동작하지 않는다.
• 대신 class 없이도 React를 사용할 수 있게 해주는 것이다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않는다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하면 된다.)
• React는 useState 같은 내장 Hook을 몇 가지 제공한다.
• 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것(custom hook)도 가능하다.

Why Use?

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

• 개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생긴다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것이다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해준다.

• 각 컴포넌트의 state는 완전히 독립적이다. Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이다. 실제로 각각의 Hook 호출은 완전히 독립된 state를 가진다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있다.

• Custom Hook은 기능이라기보다는 컨벤션(convention) 에 가깝다. 이름이 "use"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있다. useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해준다.

  폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있다.

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

componentDidMount() {
  applyFirstLogic()
  applySecondLogic()
}

// 관심사의 분리 - Data fetching
useEffect(() => {
  applyFirstLogic()
}, [])

// 관심사의 분리 - Attach event listener
useEffect(() => {
  applySecondLogic()
}, [])

3. Class는 사람과 기계를 혼동시킨다.

• Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다. Class는 최근 사용되는 도구에도 많은 문제를 일으킨다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다.

Class형 컴포넌트 vs Function 컴포넌트

Class형 컴포넌트

• state, 라이프 사이클 때문에 사용함
• 클래스로부터 한 번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음
• 반면 함수는 한 번 호출되고 메모리 상에서 사라짐 ⇒ state, 라이프 사이클 불가능
• 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재
  • 버그 발생 시키는 예제 시연 (링크, CodeSandbox)
    
    
  • this.state.foo가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생)

Function 컴포넌트

• 2018년, React v16.8 Hooks 첫 배포
• 함수는 상태를 저장하지 않는다는데, 어떻게 state, 라이프사이클을 구현했나?
  ㄴ 클로저! (함수 안의 함수)
  

Hook 사용 규칙

아래의 규칙을 지켜줘야 리액트가 각 훅의 상태를 제대로 기억할 수 있다. 훅은 함수 컴포넌트를 위한 기능이기 때문에 규칙 2에 의해 클래스형 컴포넌트의 메소드뿐만 아니라 기타 일반 함수에서도 사용할 수 없다.

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

import React, { useState } from "react"

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

	const [state2, setState2] = useState(); // Error!
}

// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 된다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있다. 바로 직접 작성한 custom Hook 내이다.)