> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/hook.md).

# 훅(Hook)

> 📚 정리\
> \- 리액트 훅의 목적은 "기억"\
> \- 상태는 이벤트 실행/ 시간이 지남에 따라 변경되는 데이터 \
> \- 함수 컴포넌트는 최초 렌더링 후 상태가 변경될 때마다 처음부터 다시 그린다. \
> \- 컴포넌트는 페이지가 전환되거나 toggle될 때 파괴된다. 

## 1. Hook의 목적 

리액트 훅은 "기억"하는 용도로 사용하는 것에 목적이 있다. 상태(state)를 기억하거나 사이드 이펙트를 수행해야 하는 경우 사용하는 특수한 함수이다.

## 2. 상태란? 

"시간이 지남에 따라 변경되는 데이터"이다. 이는 시간의 의미도 있지만 사용자에 의해 이벤트가 실행 됐을 때, 상태가 업데이는 되는 경우를 말할 수 있다. 

## 3. 컴포넌트 렌더링 

함수 컴포넌트는 처음 화면에 렌더링이 되고나서 상태가 변경될 때 마다 계속해서 컴포넌트를 다시 렌더링 한다. 이는 컴포넌트의 내부 로직을 전부 다시 읽는다는 것이다. 일반적으로 함수는 다시 렌더링 될 때, 이전의 값을 기억할 수 없지만 state를 관리하는 훅(useState, useReducer, useRef)를 사용해서 이 전의 값을 기억 할 수 있다. 

{% hint style="info" %}
바닐라 자바스크립트에서 함수가 다시 렌더링 될 때, 이 전의 값을 기억하지 못하는 문제 때문에 클로저를 사용한다. 
{% endhint %}

## 4. 컴포넌트 파괴 

그렇다면 컴포넌트는 언제 파괴 될까? 

* 페이지가 전환될 때
* toggle 처럼 요소를 열고/닫을 때

{% hint style="warning" %}
단, 페이지 전환이 아닌 경우엔 useEffect의 clean up 함수를 사용해서 언마운트 시점에 사이드 이펙트를 해제하도록 설정해야 한다. (그렇지 않으면 컴포넌트 내부의 함수가 계속 실행되어 성능에 영향을 미친다.) 
{% endhint %}

![같은 페이지여도 버튼을 클릭하여 요소를 닫을 때 컴포넌트가 파괴된다. ](/files/-MWNr0KmD3_vkYCFNU9q)

## 5. Hook 한 눈에 보기 

| 용도                                                                                                                       | 훅(Hook)         |
| ------------------------------------------------------------------------------------------------------------------------ | --------------- |
| <p><strong>간단한 상태</strong> 관리를 한다. </p><p>컴포넌트의 이전 상태를 기억하고 변화가 있을 때마다 컴포넌트를 업데이트 하고 싶다. </p>                            | useState        |
| **복잡한 상태** 관리를 한다.                                                                                                       | useReducer      |
| `context`를 사용할 때 `Provider`의 `value`를 받아 온다.                                                                             | useContext      |
| <p>함수 컴포넌트 내부에 선언한 함수가 한 번만 실행 됐으면 좋겠다. </p><p>마운트 이후 시점 DOM에 접근하고 싶다. </p>                                              | useEffect       |
| <p>자식 컴포넌트에 함수를 전파할 때, 동시성 문제를 방지하기 위해 해당 <strong>함수를 기억</strong>한다. </p><p>컴포넌트가 업데이트 될 때 마다 불필요한 과정이 발생하지 않도록 한다. </p> | useCallback     |
| <p>컴포넌트의 이전 상태를 기억하고 싶다. 하지만 업데이트는 필요 없다. </p><p>DOM 객체를 참조하여 조작하고 싶다. </p>                                              | useRef          |
| `useEffect` 사용 시 문제가 있고  `useEffect`보다 더 빨리 반응 했으면 좋겠다.                                                                  | useLayoutEffect |
| 복잡한 계산식을 기억하여 렌더링 될 때 마다 다시 계산하지 않았음 좋겠다.                                                                                | useMemo         |