[React] React Hooks : 1. Hooks 란 무엇인가?

 

Introducing Hooks – React

 

1. Hooks란?

React의 v16.8.0 [현재 v18.0.0] 등장 이후 사용할 수 있게 된 함수형 컴포넌트가 클래스형 컴포넌트의 state(상태), Lifecycle(수명 주기) 등의 기능들을 사용할 수 있도록 돕는 React의 내장 기능들을 말한다.

 

React Hooks Lifecycle

 

2. Hooks를 사용할 수 없는 상황

1) 클래스형 컴포넌트 내에서는 사용할 수 없다.

2) 내부 이벤트 핸들러

3) useMemo, useReducer 등의 같은 Hook 안에서 사용할 수 없다.

4) 일반적인 Javascript 함수 내부

 

최상위 레벨에서 호출해야 하며, 조건문, 루프, 함수에 있을 수 없다.

하단은 React에서 Hooks를 사용할 때의 공식 규칙이다.

Rules of Hooks – React

 

3. Hooks 의 종류

1) useState (상태 관리)

2) useEffect (클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 등의 수명 주기 메서드를 대체함, 상태 또는 변수 변경, 데이터 가져오기 등)

3) useContext (props를 쉽게 전달하기 위해 사용)

 

4) useRef (자주 변경되는 값을 저장하고 업데이트 하는데 유용한 Hook)

5) useReducer (상태 관리, useState와 다르게 컴포넌트의 상태 업데이트 로직을 분리시킬 수 있음)

6) useCallback (useMemo와 비슷, 특정 함수를 새로 만들지 않고 재사용하고 싶을 경우 사용)

7) useMemo (이전에 계산한 값을 재사용할 때)

8) useImperativeHandle

9) useLayoutEffect

10) useDebugValue

11) 사용자 정의 Hook

11-1) useSWR (데이터를 가져올 때 사용, 데이터가 항상 최신 상태로 동기화 되도록 할 때)

11-2) useScrollPosition (입체적인 스크롤 효과를 표현하기 위해 사용)