React 기타 등등 Hook

리액트 핵심 훅을 제외한 유용한 훅들 소개

* useImperativeHandle

• 부모 컴포넌트가 자식 컴포넌트의 특정 기능에 접근하도록 허용. 일반적으로 ref와 함께 사용되며, forwardRef가 필요함. 부모가 자식 컴포넌트의 특정 기능(예: focus, scroll)을 직접 호출.

[사용 시기]

DOM 요소의 위치, 크기 조정이 필요할 때.
애니메이션 효과나 스크롤 위치 설정.

[차이점]

useEffect: 렌더링 이후 실행 (비동기).
useLayoutEffect: 렌더링 직전에 실행 (동기).

[사용 예시]

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
});

function Parent() {
  const ref = React.useRef();

  return (
    <div>
      <FancyInput ref={ref} />
      <button onClick={() => ref.current.focus()}>포커스</button>
    </div>
  );
}

* useLayoutEffect

• DOM이 렌더링된 직후, 브라우저가 그리기 전에 동기적으로 실행. DOM 변경 후 바로 실행이 필요한 경우에 적합하다. useEffect와 비슷하지만 실행 시점이 다르다.

function LayoutEffectExample() {
  const divRef = React.useRef();

  React.useLayoutEffect(() => {
    console.log(divRef.current.offsetHeight);
  }, []);

  return <div ref={divRef}>레이아웃 확인</div>;
}

* useTransition

• 상태 업데이트를 긴급/비긴급으로 나누어 처리한다. 사용자 인터페이스가 부드럽게 유지.(된다고 하는데 나는 아직 체감을 못함). React 18의 Concurrent Mode에서 유용.

function App() {
  const [isPending, startTransition] = React.useTransition();
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount((c) => c + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>클릭</button>
      {isPending ? <p>로딩 중...</p> : <p>결과: {count}</p>}
    </div>
  );
}

* useId

• 고유한 ID를 생성해서 HTML에 사용한다. 나는 폼에 적용했었다. 컴포넌트간 충돌이 없어 좋음 !!!

function Component() {
  const id = React.useId();

  return (
    <label htmlFor={id}>
      입력창
      <input id={id} />
    </label>
  );
}

* useDefferedValue

• 부하가 큰 연산의 업데이트를 지연시켜 UI 성능 개선. UI가 느려지지 않도록 함.

function App({ value }) {
  const deferredValue = React.useDeferredValue(value);

  return <div>{deferredValue}</div>;
}