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