Hook

Hook이란?

• 함수 컴포넌트에서 React state와 Lifecycle features을 hook inoto 할 수 있게해주는 함수
• Class 안에서 동작하지 않으며, class 없이도 React를 사용할 수 있게 해주는 것이며, Hook 사용을 권장함
• Component 간에 상태 관련 로직을 재사용하기 위해서 Custom Hook도 가능

Hook이 나오게 된 이유

• 컴포넌트 사이에서 상태 로직을 재사용하기 어려움(HOC, render props)
• 복잡한 컴포넌트들은 이해하기 어려움(괌심사의 분리, Lifecycle API)
• Class는 사람과 기계를 혼동시킴

Hook의 특징

• 선택적 사용
• 이전버전과의 완벽한 호환성
• 현재 사용 가능

Class형 컴포넌트와 Function 컴포넌트

클래스형 컴포넌트

• state와 Lifecycle 때문에 사용
• 클래스로부터 한번 인스턴스가 생성이 되고 나면 독릭적으로 움직일 수 있음
• 함수는 한번 호출되고 메모리상에서 사라짐
  • 함수는 state와 Lifecycle 불가능

  Hook 사용 규칙

  import React, { useState } from "react"
• 규칙 1: At the top level(최상위)에서만 Hook 호출 / 반복, 조건, 중첩된 함수 내에서 Hook을 실행하면 안된다
• 규칙 2: React 함수 컴포넌트 내에서만 Hook을 호출해야 한다