Hook이란?
Hook은 리액트 버전 16.8부터 리액트 요소로 새로 추가됐다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 됐다.
Hook의 등장 배경
컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.
기존에는 컴포넌트 간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않았다. 이전에는 render props나 고차 컴포넌트 같은 패턴을 통해 문제를 해결했다. 하지만 이런 패턴 사용은 컴포넌트의 재구성을 강요하고, 코드의 추적을 어렵게 만든다.
Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
복잡한 컴포넌트들을 이해하기 어렵다.
각 생명주기 메서드에는 관련 없는 로직이 섞여들어간다. 예를 들어 componentDidmount 와 componentDidUpdate는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할 때 사용해야 하지만 같은 componentDidMount 에서 이벤트 리스너를 설정하는 것과 같은 관계 없는 로직이 포함된다.
이같은 문제를 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는 것 보다 Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방식으로 사용한다.
사람과 기계를 혼동시키는 Class
리액트에서 Class를 사용하기 위해서는 자바스크립트의 this가 어떻게 작동하는지 이해해야한다. 자바스크립트의 this는 다른 언어와는 다르게 작동했으며, 이는 혼란을 주었다.
Hook은 Class없이 리액트 기능들을 사용하는 방법을 제시한다. 개념적으로 React 컴포넌트들은 함수에 더 가깝기도 하다.
Hook 사용 규칙
- 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩 함수 내에서 실행하면 안된다.
- 리액트 함수 컴포넌트 안에서만 호출해야 한다. 일반 자바스크립트 함수에서는 호출해서는 안된다.
Hook의 종류
기본 Hooks
- useState(동적 상태 관리)
- useEffect(사이드 이펙트 수행)
- useContext(컴포넌트를 중첩하지 않고 전역 값 관리)
추가 Hooks
- useReducer
- useCallback
- useMemo
- useRef
출처
