Hooks

Hook은 함수 컴포넌트에서 State와 LifeCycle을 연동할 수 있게 해주는 함수이다. 따라서 class컴포넌트형에서는 동작하지 않는다. 내가 자주 사용하고 있던 useState와 같은것은 내장 Hook이고, 컴포넌트 간에 상태 관련하여 로직을 재사용하기 위해 custom hook도 제작 가능하다.

사용하는 이유

컴포넌트 사이에서 상태와 관련된 로직을 재사용하기위해

상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생길때, 문제를 해결하기 위한 방법으로 higher-order components(고차 컴포넌트, 로직을 재사용하기 위한 기술)와 render props(컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 테크닉)가 있는데, Custom Hook은 이 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 재사용 가능하게 해준다.

사용 규칙

최상위에서만 Hook을 호출해야 하고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안됨.

import React, { useState } from "react"

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

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

React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.