React 16.8에서 새롭게 도입된 Class가 필요 없는 상태관리 도구이다.

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

Hook Into해준다고 해서 Hook이라고 부른다.

Hook이 나온 배경

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

  <aside> 📌 React에서 컴포넌트 간 재사용을 하기위해 주로 render props와 고차 컴포넌트 패턴이 이용됐다. 이런 패턴은 컴포넌트를 재구성 해야하는 단점과 코드의 추적이 힘들다는 문제가 있다. (props를 받게끔 컴포넌트를 구성해야 하고, 원본을 찾기 위해 props를 추적해서 올라가야 했음)

  Hook은 기존 class에 묶여서 관리되던 상태를 외부에서 제어할 수 있게 하여 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.

  </aside>

• 복잡한 컴포넌트 이해가 어렵다

  <aside> 📌 class형 컴포넌트 작업을 하다보면, 생명주기를 직접 다뤄야 할 일이 빈번히 있다. (componentDidMount, componentDidUpdate 등) 이런 생명주기는 개발자가 예상하지 못했던 버그가 발생할 가능성이 있고, 연관없는 코드가 불필요하게 실행되야 한다는 단점이 있다.

  Hook에서는 이 생명주기를 effect를 사용해 통합시켜 해결했다. 즉, 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.

  </aside>

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

  <aside> 📌 react는 기본적으로 함수형 컴포넌트에 가깝게 개발 됐다. 하지만, class형 컴포넌트로 개발을 하다보니 오히려 javascript 개발자에게 높은 진입장벽이 됐다.

  Hook은 Class없이 React의 기능들을 사용할 수 있게 해준다.

  </aside>

Hook 사용해보기

import React, { useState } from 'react';

function Example() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>Clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>
				click
			</button>
		</div>
	)
}

Hook은 use~~~ 라는 네이밍 룰을 따르는게 관습이다. (커스텀 훅을 만들더라도 use라는 네이밍을 이용해 그 기능이 훅임을 쉽게 파악할 수 있다.)

기본적으로 사용할 수 있는 useState는 2차원 배열로 구성된다.

0번째 index는 값을, 1번째 index는 setter를 사용한다.

const [count, setCount] = useState(0);

--------------

var countVariable = useState(0);
var count = countVariable[0];
var setCount = countVariable[1];

즉, 대괄호를 통해 한 줄로 표현한 식과 변수들의 나열로 표현한 식은 동일한 형식이다.

Hook에서 side effect 사용하기

어떠한 데이터가 변경이 됐을 때 추가적인 작업을 진행하기 위해 Effect Hook을 이용해 side effect를 수행할 수 있다.

useEffect(() => {
	document.title = `click ${count}`;
});