리액트를 다루는 기술에 안 나오는 hook 탐구

Felix Yi·2020년 3월 26일

hooks

책을 읽었다 뿐이지 실제로 써보고 '아 이렇구나' 느낀 건 하나도 없다. 나같은 사람이 리액트로 개발을 한다니 참 신기하구나. 여튼, 회사에서 구매한 템플릿에 책에서 못본 훅이 있어서 함 보고파.

useImperativeHandle
useLayoutEffect
useDebugValue

useImperativeHandle

명령다루기, 이름을 보니까 명령을 내리면 그 명령을 어떻게 다뤄야 하는 지를 hool 으로 받을 거 같다.

ref 직접 참조는 피할 패턴이라고 하지만 초보자에게는 사용성 높다.
dom 조작(인스턴스가 아닌 값 조작으로) & ref 커스터마이즈

함수형 컴포넌트에서 ref 조작을 하게 하려면 필요.
함수형 컴포넌트는 ref 를 걸 수가 없으므로, forwardRef 로 외부에서 내려 보내줘야 함.

클래스 컴포넌트의 ref 는 인스턴스 조작이지만, 요건 훅에서 지정해서 리턴한 값만 조작이 가능해짐

// forwardRef 로 부모 컴포넌트에서 생성한 참조를 전달해줌
const MyInput = React.forwardRef((props, ref) => {
  const [val, setVal] = React.useState('');
  // 내부에서 ref를 걸고.
  const inputRef = React.useRef();

  // 이 훅으로 부모에서 전달된 ref 에 반환할 값을 지정함
  React.useImperativeHandle(ref, () => ({
    // 여기서는 딷 blur() 함수 하나만 반환함
    blur: () => {
      document.title = val;
      inputRef.current.blur();
    }
  }));

  return (
    <input
      ref={inputRef}
      val={val}
      onChange={e => setVal(e.target.value)}
      {...props}
    />
  );
});

const App = () => {
  // 빈 ref 만든 후
  const ref = React.useRef(null);
  const onBlur = () => {
    console.log(ref.current); // Only contains one property!
    // useImperativeHandle 에서 반환한 blur() 메소드 호출해서
    // 간접적으로 자식 컴포넌트를 조작
    ref.current.blur();
  };

  // 전달을 해주면 forwardRef 타고 들어가서 리턴을 받아옴
  return <MyInput ref={ref} onBlur={onBlur} />;
};