Today 요약

1. 모던 리액트 딥다이브

1. What I Learned?

모든 리액트 딥다이브

useImperativeHandle 훅

ref는 그 이름 그대로 props 처럼 전달할 수 없다. 하지만 이름을 바꿔서 전달하면 가능하다. 그럼에도 forwardRef가 존재하는 이유는 일관성을 갖기 위해서다. ref를 확실하게 전달한다는 일관성 말이다.

useImperativeHandle은 그런 ref를 좀 더 다른 방식으로 사용할 수 있게 해준다. ref는 일반적으로 current에 HTMLElement만 주입할 수 있는데, useImperativeHandle 훅을 사용하게 되면, 추가적인 동작을 정의할 수 있다.

import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... your methods ...
      // ... 메서드는 여기에 작성합니다 ...
    };
  }, []);
  // ...

useLayoutEffect 훅

쉽게 이야기하자면, useEffect 전에 즉, 브라우저에 변경사항이 반영되기 전, 마운트 되기 직전에 실행할 로직을 담아서 관리한다.

DOM의 변경 → useLayoutEffect → 브라우저에 반영 → useEffect 순이다. 나머지 사용방법은 useEffect와 동일하다.

useDebugValue 훅

커스텀 훅 내부에서 사용할 수 있으며, 훅을 호출했을 때 디버깅 정보를 노출하고 싶을 때 사용한다. 첫 번째 인자의 값이 변경될 때 두번째 인자에 선언한 함수가 호출된다.

import { useDebugValue } from 'react'

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline')
  // ...
}

훅의 규칙

컴포넌트 최상위에서 사용해야 한다. 조건문 내부에서 사용하면 안되고, 훅의 내부에서 조건문을 사용해야 한다.

훅을 호출할 수 있는 건 함수형 컴포넌트와 커스텀 훅 뿐이다.