[React] React Hooks란?

React Hooks란?

React Hooks는 리액트 16.8 버전에서 도입된 기능으로 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있도록 해준다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하며 복잡한 상태 로직을 보다 간결하고 직관적으로 다룰 수 있게 해준다.

함수형 컴포넌트
함수형 컴포넌트는 간단한 형태의 컴포넌트로, 클래스형 컴포넌트보다 작성하기 간편하다. 훅스를 사용하면 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있다.
Hooks 사용 
훅스는 use로 시작하는 함수들로 리액트에서 제공하는 내장 훅스와 사용자 정의 훅스가 있다. 내장 훅스는 리액트에서 제공하며 사용자 정의 훅스는 개발자가 필요에 따라 만들 수 있다.

Hook 규칙

1. 최상위 레벨 호출: Hook은 컴포넌트의 최상위 레벨에서 호출해야 한다. 조건문이나 반복문 안에서는 Hook 호출할 수 없다. Hook은 항상 동일한 순서로 호출되어야 하기 때문이다.
2. 리액트 함수형 컴포넌트 또는 사용자 정의 훅에서만 호출: Hook은 일반 자바스크립트 함수나 클래스형 컴포넌트에서 호출할 수 없다. 함수형 컴포넌트나 사용자 정의 훅 내부에서만 호출할 수 있다.
3. 사용자 정의 훅에서 사용: 사용자 정의 Hook은 리액트 Hook을 사용하여 비즈니스 로직을 재사용할 수 있게 해준다. 이러한 훅스는 다른 훅스를 호출하여 상태 관리 및 사이드 이펙트를 처리할 수 있다.

자주 사용하는 React Hooks

• useState
• useEffect
• useRef
• useMemo
• useCallback

참고문헌

React Reference Overview – React