위코드 파운데이션 과정을 들으며 정리한 내용입니다.

Hook 정의

Hook 은 state 관리와 lifecycle 관리 기능을 함수 컴포넌트에서 상용할 수 있게 연동(hook In)해주는 함수입니다.(미리 만들어 놓은 함수를 가져다 쓰는 것) 이런 Hook 들의 모음을 Hooks 라고 합니다.

Hook 등장 배경

리액트 컴포넌트는 클래스와 함수 두가지 방식으로 만들 수 있습니다. 초창기에는 클래스에서만 state 관리와 lifecycle 관리 기능이 가능해 클래스를 사용했으나, 클래스는 함수에 비해 선언하기 불편하고 덜 직관이며, 메모리를 더 많이 사용하는 단점이 있었습니다. 이후 함수 컴포넌트에서도 해당 기능을 할 수 있게 Hook 이 나왔습니다.

Hook 특징

리액트는 useState 와 같은 내장 Hook 을 몇 가지 제공하고 컴포넌트 간 상태 관련 로직 재사용을 위해 custom hook 도 가능합니다. Hook 은 클래스 컴포넌트 안에서는 동작하지 않습니다. 함수 컴포넌트 내부나 custom Hook 내부에서 호출해야 합니다.

Hook 사용 규칙, 최상위 호출

useState Hook은 최상위에서 호출해야 합니다. (함수 컴포넌트의 첫번 째 {} 안에) 만약 첫번 째 {} 가 아니라 내부의 If 문, 반복문 등 중첩된 코드 블락 {} 안에 있으면 호출되지 않습니다. 리액트가 여러 Hook 을 구분할 수 있는 정보는 Hook 이 사용된 순서이므로, 중첩문에 들어가면 순서가 석이게 됩니다.

아래 최상위 호출한 예시 입니다.

import React, { useState } from 'react';

const Test = () => {
	const [color, setColor] = useState('red');
  	// 이렇게 첫 중괄호 안에, 아래 if 문 안에 있으면 안됨
	if (5 > 3) {
		console.log('true');
	}
	return <div onClick={setColor('blue')}>Hello! {color}</div>
};

export default Test;