Hook이란 무엇인가?
- React v16.8 부터 새롭게 도입된 기능
- 함수 컴포넌트에서도 state 관리와 생명 주기 메소드 등 여러 다양한 React 기능들을 사용할 수 있다.
- React의 State Machine에 연결하는 기본적인 방법
- Hook은 state, context, ref, lifecycle 등과 같은 다양한 React 개념을 사용자가 손쉽게 사용할 수 있도록 좀 더 직관적인 API(내장 Hook)를 제공한다.
- 컴포넌트 사이의 state 관련 로직을 재사용하기 위해 사용자가 직접 자신만의 Hook을 만들어 사용할 수도 있다.
Hook의 특징
- 컴포넌트로부터 state 관련 로직을 추상화할 수 있다.
- 독립적인 테스트와 로직의 재사용이 가능해진다.
- state 관련 로직과 사이드 이펙트(side effect) 등이 포함된 복잡한 컴포넌트를 유지보수가 쉬워지도록 비슷한 동작을 하는 컴포넌트들로 나누어 관리할 수 있다.
- Hook은 이전 버전의 React와도 완벽하게 호환된다.
- 클래스 컴포넌트 기반으로 구현된 기존의 React 프로젝트에도 Hook을 점진적으로 도입할 수 있다.
- 기존에 작성한 코드는 그대로 유지한 채 새롭게 작성하는 컴포넌트부터 Hook을 사용하면 된다.
- 클래스 컴포넌트를 사용하는 프로젝트에 Hook을 도입하여 얻는 장점이 그리 크지 않다고 판단된다면 반드시 도입할 필요는 없다.
- React에서는 클래스 컴포넌트를 앞으로도 계속 지원할 예정이라고 밝혔다.
Hook의 사용 규칙
- 반드시 컴포넌트의 최상위 레벨에서 호출해야 한다.
- Hook은 반복문이나 조건문, 중첩된 함수 등에서 호출해서는 안 된다.
- Hook은 일반 자바스크립트 함수에서 호출해서는 안 된다.
- React의 함수 컴포넌트 내에서만 호출해야 한다.
사용자 정의 Hook 내에서도 Hook을 호출할 수 있다.
내장 Hooks (built-in hooks)
- React에서 기본적으로 제공하고 있는 Hook을 의미한다.
- 종류
- State Hooks
- state를 활용하여 사용자 입력과 같은 데이터를 저장할 수 있다.
- useState와 useReducer가 해당한다.
- Context Hooks
- props로 데이터를 전달하지 않고도 컨텍스트(context)를 사용하여 상위 컴포넌트로부터 데이터를 전달 받을 수 있다.
- useContext가 해당한다.
- Ref Hooks
- ref를 활용하여 DOM 노드와 같은 렌더링에 사용되지 않는 일부 데이터를 저장할 수 있다.
- ref는 state와는 달리 업데이트해도 컴포넌트가 리렌더링되지 않는다.
- useRef가 해당한다.
- Effect Hooks
- effect를 활용하여 네트워크, 브라우저 DOM 또는 React로 작성되지 않은 코드 등을 처리할 수 있다.
- useEffect가 해당한다.
- Performance Hooks
- 리렌더링 성능을 최적화하는 일반적인 방법은 불필요한 작업을 건너뛴다.
- 직전에 렌더링한 이후 데이터가 변경되지 않았다면 캐시된 데이터를 재사용하거나 리렌더링을 건너뛰도록 설정할 수 있다.
- useMemo, useCallback, useTransition, useDeleredValue가 해당한다.
- State Hooks