1. Rules of Hooks

Introduction

이번 글에서는 React에서 Hook의 규칙에 대해 알아보고 또 알려진 Hook은 무엇이 있는지 알아보고자 합니다.

---

1. Rules of Hooks

[1] 원문글링크

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hooks는 React 16.8에서 새롭게 추가된 기능입니다. 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용할 수 있게 해줍니다..

 

+ React 16.8 버전은 2019년 2월 6일에 릴리스되었습니다

 

Hooks are JavaScript functions, but you need to follow two rules when using them.

 

1.1. Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls. (If you’re curious, we’ll explain this in depth below.)

 

Hooks를 루프, 조건문 또는 중첩된 함수 내에서 호출하지 마십시오.

대신, 항상 Hooks를 React 함수의 최상위 수준에서, 일찍 반환하기 전에 사용하십시오. 
이 규칙을 따르면 컴포넌트가 렌더링될 때마다 Hooks가 항상 동일한 순서로 호출되도록 보장합니다. 
이것이 React가 여러 useState 및 useEffect 호출 사이에서 Hooks의 상태를 올바르게 보존하는 것을 가능하게 하는 것입니다. 

 

1.2. Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions
일반 JavaScript 함수에서 Hooks를 호출하지 마세요.

 

Call Hooks from React function components.
React 함수 컴포넌트에서 Hooks를 호출하세요.

 

Call Hooks from custom Hooks
커스텀 Hooks에서 Hooks를 호출하세요.

 

2. 예시문

bad example

// 조건문에 Hook을 사용함으로써 규칙을 깼습니다
if (name !== '') {
	useEffect(function persistForm() {
		localStorage.setItem('formData', name);
	});
}

 

good example

 useEffect(function persistForm() {
	// 더 이상 첫 번째 규칙을 어기지 않습니다
	if (name !== '') {
		localStorage.setItem('formData', name);
	}
});

 

3. 알려진 Hook 소개

Basic Hooks 

• useState - 컴포넌트에 상태 변수를 추가할 수 있게 해주는 기능입니다.
• useEffect - 컴포넌트를 외부 시스템과 동기화시킬 수 있게 해주는 기능입니다.
• useContext - 컴포넌트에서 컨텍스트를 읽고 구독할 수 있게 해주는 기능입니다.

 

Additional Hooks

• useReducer - 컴포넌트에 리듀서를 추가할 수 있게 해주는 기능입니다.
• useCallback - 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 기능입니다.
• useMemo - 리렌더링 사이에 계산 결과를 캐시할 수 있게 해주는 기능입니다.
• useRef - 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 React Hook입니다.
• useImperativeHandle - 노출된 ref를 사용자 정의하는 데 도움을 주는 React Hook입니다.
• useLayoutEffect - 브라우저가 화면을 다시 그리기 전에 발생하는 useEffect의 버전입니다.
• useDebugValue - React DevTools에서 사용자 정의 Hook에 레이블을 추가할 수 있게 해주는 기능입니다.
• useDeferredValue - 일부 UI 업데이트를 지연시킬 수 있게 해주는 React Hook입니다.
• useTransition - UI를 차단하지 않고 상태를 업데이트할 수 있게 해주는 React Hook입니다.
• useId - 접근성 속성에 전달할 수 있는 고유한 ID를 생성하는 데 사용되는 React Hook입니다.

 

Library Hooks

• useSyncExternalStore - 외부 저장소에 구독할 수 있게 해주는 React Hook입니다.
• useInsertionEffect - 레이아웃 효과가 발생하기 전에 DOM에 요소를 삽입할 수 있게 해주는 React Hook입니다.

 

다음 장부터 Basic Hooks 부터 Libray Hooks까지 단계별로 살펴보겠습니다.

---

[1] 원문글링크 : Why is Search Engine Optimization (SEO) Such a Popular Discussion Topic? (linkedin.com