Hook은 리엑트가 함수 컴포넌트를 만들며 어떤 값을 유지할 수 있도록 캐시를 만들었고, 이 캐시를 이용해 상태 관리를 할 수 있도록 만든 여러개의 API를 훅(Hook)이라 합니다.
대표적으로 useState , useEffect 등이 있습니다.

1. Hook?

1-1. 훅이란...?

• Hook 은 클래스컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in) 해주는 함수를 말합니다.

1-2. Hook은 왜 등장했을까?

• React에서는 컴포넌트를 만들 수 있는 방법이 2가지가 있습니다.
  1. 클래스 컴포넌트
  2. 함수 컴포넌트
• React가 탄생한 초창기에는 클래스 컴포넌트에서만 사용할 수 있는 기술들이 있었기에 매번 컴포넌트를 생성했어야 했습니다.
• 하지만 지속적으로 클래스 컴포넌트만을 사용하기에는 함수 컴포넌트가 클래스 컴포넌트에 비해 선언하기도 편하고, 직관적이고, 메모리 자원을 덜 사용하는 등의 장점이 있었습니다.
• 그래서 React 개발자들 사이에서 함수 컴포넌트를 사용하고자 하는 니즈가 많아졌고, 함수 컴포넌트를 사용할 수 없었던 가장 큰 이유인 상태(state) 관리와 라이프 사이클(lifecycle) 관리 기능을 함수 컴포넌트에서도 사용할 수 있게 해주는 Hook이 나오면서 함수 컴포넌트의 시대가 도래했습니다.

1-3. hook의 특징

• React는 useState와 같은 내장 hook을 몇가지 제공하고 있고, 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 custom hook 도 가능합니다.
• Hook은 클래스 컴포넌트 안에서는 동작하지 않으며 오로지 함수 컴포넌트 내에서만 사용해야 합니다.

  ---

2. Hook 사용 규칙

2-1. 함수 컴포넌트 내에서 호출

• Hook을 호출 할 수 있는 곳은 두 가지의 경우밖에 없습니다.
  1. 함수 컴포넌트 내부
  2. custom hook 내부
• 위 두 가지의 경우를 제외한 곳에서는 호출할 수 없고, 클래스 컴포넌트의 메서드 뿐만 아니라 일반 Javascript 함수에서도 사용할 수 없습니다.

2-2. 최상위에서의 호출

• Hook은 항상 함수 컴포넌트의 최상위에서만 호출 해야 합니다.
• 이 규칙을 따라야만 컴포넌트가 랜더링 될 떄마다 항상 동일한 순서로 여러 개의 Hook이 호출되는 것을 보장할 수 있습니다.
• 왜냐하면 React가 여러 개의 hook을 구분할 수 있는 유일한 정보는 hook이 사용된 순서이기 때문입니다.

또한, 반복문과 조건문, 중첩된 함수 내에서는 Hook을 호출하면 안됩니다.
특정 조건에 부합하지 않는 경우 Hook을 호출하지 않게 되고, 그렇다면 Hook이 사용된 순서가 섞이기 때문입니다.

위의 말이 무슨 말인지는 아래의 코드를 살펴보면서 알아봅시다.

// 좋은 예제
import React, { useState } from 'react';

const Test = () => {                            
	const [color, setColor] = useState('red');

	if(5 > 3){                                             
		console.log("true");
	};

	return (
		<div>Hello!</div>
	);
};            
                               
export default Test;

• 자, 위의 예제는 useState Hook을 규칙에 따라서 최상위에서 호출 했습니다.
• 여기서 최상위라는 것은 함수 컴포넌트의 첫 번째 {} 내부를 의미 합니다. 만약 첫 번째 {} 내부가 아닌 if문, 반복문 등 중첩되는 코드 블락의 {} 안에서 호출하면 에러가 발생합니다.

// 잘못된 예제
import React, { useState } from 'react';

const Test = () => {                            
	if(5 > 3){                                    
	  const [color, setColor] = useState('red');
	};                                            

	return (
		<div>Hello!</div>
	);
};                                              

export default Test;