Hooks

Hook의 개요 - React

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

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

클래스형 컴포넌트 단점

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

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

  componentDidMount() {
  	applyFirstLogic()
  	applySecondLogic()
  }

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

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

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

클래스형 컴포넌트

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

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

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

• 클래스 사용해보니 해결하기 힘든 여러가지 문제 존재

  • 버그 발생 시키는 예제 시연 (링크, CodeSandbox)

  • **this.state.foo가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생)**

Hook 사용 규칙

규칙 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 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)