Hooks란 무엇인가?

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수이다.
class 컴포넌트 안에서는 동작하지 않으며, useState, useEffect 등 내장 Hook을 제공한다.(Hook을 직접 만드는 custom hook도 가능)

함수 컴포넌트의 기본적인 이해

props => jsx ( props 를 받아서 jsx를 return 한다.)

const Example = (props) =>{
  return `<h1>${props.name}</h1>`  
}
Example({name : 'kyunghoon' });

Hooks를 사용하는 이유는?

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵기 때문에
2. 관심사의 분리를 통해 복잡한 컴포넌트들을 이해하기 쉽게 만들어준다.

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

3. class 컴포넌트는 사람과 기계를 혼동시키기 때문
   (예) 인스타그램에서 "A"에게 좋아요를 누르고 "B"에게 이동했는데 "B"에게 좋아요가 찍힘.(최신의 state 만을 확인하기 때문에 동작을 입력한 뒤 화면이 바뀌면 그 환경에서 동작을 처리함)

Hook의 사용규칙

1. 최상위에서만 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을 호출해야 한다.(custom Hook에서는 가능)