Hook

정의

React Hook은 React 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다.
React 버전 16.8부터 도입되었으며, 클래스형 컴포넌트에서만 사용할 수 있었던 기능을 함수형 컴포넌트에서도 사용할 수 있도록 만들어줍니다.

[ useState ]
State 기능을 낚아채오는 Hook

[ useRef ]
Reference 기능을 낚아채오는 Hook

특징

1. 내부에서만 호출 가능

외부에서 호출하는 소스 코드

Hook을 사용하려면 반드시 컴포넌트 내부에서만 호출해야 합니다.

2. 조건부로 호출될 수 없다.

조건문이나 반복문안에서 호출할 수 없습니다.

컴포넌트를 호출해서 렌더링할 때
조건문, 반복문 내부에서 호출하게되면
서로 다른 Hook의 호출 순서가 엉망이 되어버려
내부적인 오류가 발생할 수가 있습니다.

3. Custom Hook을 만들 수 있다. ★★

아래 소스와 같은 컴포넌트를 여러 개 생성해야 한다면
중복을 제거하기 위해 별도의 함수를 생성할 수 있습니다.

자주 사용되는 부분을 getInput()함수로 선언했지만
자바 스크립트 함수에서는 Hook을 사용할 수 없습니다.

React Hooks는 React 컴포넌트 내부에서만 호출 가능합니다.

Custom Hook 생성 방법

함수 이름 앞에 use를 작성하면 됩니다.

useInput()으로 생성한 custom hook을 사용하여
아래와 같이 기존에 선언된 useInput을 호출해서
효율적으로 소스코드를 작성할 수 있습니다.

종류

1. useState

상태 변수를 선언하는 데 사용됩니다.
초기값을 인자로 받아 상태 변수와 그 상태를 갱신하는 함수를 반환합니다.

const [count, setCount] = useState(0);

2. useEffect

사이드 이펙트를 수행하기 위해 사용됩니다.
컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있습니다. (예: 데이터 페칭, 구독 설정 등)
의존성 배열을 두 번째 인자로 받아, 그 배열의 값이 변경될 때마다 효과를 재실행합니다.

useEffect(() => {
  // 컴포넌트가 마운트될 때와 의존성이 변경될 때 실행
  document.title = `You clicked ${count} times`;
}, [count]);

3. useContext

컨텍스트 API를 사용하여 데이터를 컴포넌트 트리 전체에 걸쳐 쉽게 전달할 수 있게 해줍니다.

const value = useContext(MyContext);
useReducer

useState의 대체 함수로, 더 복잡한 상태 로직을 다룰 때 사용됩니다.
reducer 함수와 초기 상태를 인자로 받아 현재 상태와 디스패치 함수를 반환합니다.

const [state, dispatch] = useReducer(reducer, initialState);

4. useCallback

메모이제이션된 콜백 함수를 반환하여, 함수의 재생성을 방지합니다.
성능 최적화에 유용합니다.
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);

5. useMemo

메모이제이션된 값을 반환하여, 값의 재계산을 방지합니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6. useRef

mutable 객체를 반환하여, 컴포넌트의 라이프사이클 동안 유지되는 값을 사용할 수 있게 해줍니다.
주로 DOM 요소에 접근할 때 사용됩니다.

const inputRef = useRef(null);
useImperativeHandle

ref를 사용하여 부모 컴포넌트에서 자식 컴포넌트의 인스턴스 메서드를 직접 호출할 수 있게 해줍니다.

useImperativeHandle(ref, () => ({
  focus: () => {
    inputRef.current.focus();
  }
}));

7. useLayoutEffect

useEffect와 비슷하지만, DOM 업데이트 후에 동기적으로 실행됩니다.

useLayoutEffect(() => {
  // 동기적으로 실행
}, []);

8. useDebugValue

사용자 정의 Hook을 디버깅할 때 유용합니다.

useDebugValue(value);