잘 사용하지 않은 React use Hook - 3

1. useImperativeHandle

useImperativeHandle은 함수 컴포넌트에서 생성된 ref 객체의 인스턴스를 조작하고 사용자 정의 메서드를 노출할 때 사용하는 Hook입니다. 이 Hook은 주로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접적으로 조작해야 할 때 사용됩니다.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  const internalRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      internalRef.current.focus();
    },
    // 다른 사용자 정의 메서드들...
  }));

  return <input ref={internalRef} />;
});

// 부모 컴포넌트
const ParentComponent = () => {
  const childRef = useRef();

  const handleClick = () => {
    // 부모 컴포넌트에서 자식 컴포넌트의 포커스 메서드를 호출
    childRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Focus Child Component</button>
    </div>
  );
};

export default ParentComponent;

위 예제에서 자식 컴포넌트는 input 요소를 렌더링하는데 부모컴포넌트에서 자식의 input요소를 focus하기 위한 코드로 useImperativeHandle을 사용하여 자식컴포넌트에서 focus함수를 정의하면 부모컴포넌트에서 자식의 focus를 호출 할 수 있습니다.

 

2. useLayoutEffect

useLayoutEffect는 브라우저에 변화가 일어나기 전에 DOM을 조작하거나 측정하기 위해 사용됩니다. useLayoutEffect의 동작은 useEffect와 유사하지만, useEffect와 달리 동기적으로 작동합니다.

 

브라우저 변화가 일어나기전에 dom 에 대한 작업을 해야하는 경우 사용합니다.

 

3. useDebugValue

디버깅을 위해 컴포넌트의 현태 상태나 props값을 쉽게 확인하기 위해 사용하는데 보통 콘솔이나 개발자 도구의 컴포넌트 트리를 이용했지만 devTools의 크롬확장프로그램으로 쉽게 디버깅 가능하게 해줍니다.

const useCustomHook = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  // 값이 홀수인지 짝수인지에 따라 라벨을 지정하여 DevTools에 표시합니다.
  useDebugValue(value % 2 === 0 ? '짝수' : '홀수');

  return [value, setValue];
};

 

useDebugValue로 값을 넘겨주면 위 예시코드처럼 훅에 대해변화하는 상태값을 쉽게 확인 할 수 있습니다.