[React-Basic-Hooks] 8. Handle DOM in React (ref)

[beecomci]

📝 useRef 사용은 언제?

• 실제 DOM 접근에 사용
• render에 영향을 주지 않는 mutable data 관리에 편리
  • 함수형 컴포넌트에서는 render될 때마다 함수가 매번 재실행되어 각각 매번 스코프가 생김 -> 함수 내에서 변수 설정을 해놓아도 매번 render될 때마다 재할당이 됨 -> 이전 값을 유지하려면 hook - reference를 사용해서 따로 관리 필요
  • 예) API 호출이 5번만 되어야한다면, 호출 와중에 update가 되어서 영향을 받지 않으려면 count를 state로 두면 변경될 때마다 매번 rendering이 되니 render에는 영향을 주지 않지만 mutable하게 관리하기 위해서 reference useRef 사용

DOM에 ref 사용하기 좋은 예

• animation 제어를 해야할 때 (대신 react-spring 추천)
• input::focus, input::text, media 선택 제어가 필요할 때(DOM API 호출을 해야할 때)
• 외부 DOM Library 사용할 때(jquery, egjs 등)

그 외에는 되도록 사용하지 않는 것이 좋다.

💡선언적(declartive)으로 생각하기 => Dialog component의 open(), close() 함수를 노출하기 보다는(명령형) isOpen 값(상태값)을 전달하여 제어하도록 한다. 상태에 맞는 컴포넌트를 그리도록 React에게 위임, Dialog 내에서는 isOpen의 상태값에 맞는 화면 정의가 잘 되어 있으면 Dialog가 받는 props(isOpen)으로 제어됨

DOM 라이브러리 사용시 어떻게 사용해야 할까?

• Virtual DOM에 영향을 주지 않고 직접 DOM을 제어하기 때문에 sideEffect -> useEffect 사용
• DOM을 직접 제어하기 때문에 SSR에서 처리 할 수 없음
• DOM을 직접 제어하는 것은 React, Virtual DOM을 제어하는 것은 개발자(Component 생성 etc), 개발자가 만든 Virtual DOM을 실제 DOM과 매칭시키는 것은 React의 역할, 실제 DOM을 개발자가 제어하는 경우 React가 알고 있는 DOM과 달라져서 매칭이 깨질 수가 있기에 주의해서 사용, useRef로 사용하는 것은 고립을 시키고 React가 할 일은 React에게 위임하도록 개발하는 것이 좋음

@07-refs/dom

import { useRef } from 'react';

const TextInput = () => {
  // DOM 접근시 ref 사용
  const textInputRef = useRef(null);
  const focusInput = () => {
    // 접근시 current로 접근하면 실제 dom 접근
    textInputRef.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInputRef} // React가 실제 DOM render 후 reference를 붙여줌
      />
      <button onClick={focusInput}>
        Focus
      </button>
    </div>
  );
}

forwardRef

• 상위 component의 ref에 하위 commponent의 ref를 전달
• 되도록 사용하지 않는 것이 좋음
  • 사용해야 하는 상황이 생기면 다시 설계를 고민해 보는것도 좋음
• useImperativeHandle hook과 같이 사용

@07-refs/forward

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

function AutoFocusTextInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focusInput();
  }, []); // mount 되었을 때 1번만 실행

  return <ForwaredTextInput ref={inputRef} />;
}

// forwardRef를 사용하면 부모 컴포넌트로부터 ref 전달받기 가능
function TextInput(props, ref) {
  const textInput = useRef(null);

  const focusInput = () => {
    textInput.current.focus();
  }

  // focuseInput 함수를 상위 컴포넌트로 전달하겠따
  useImperativeHandle(ref, () => ({ focusInput }))

  return (
    <div>
      <input
        type="text"
        ref={textInput}
      />
      <button onClick={focusInput}>
        Focus
      </button>
    </div>
  );
}

// forwardRef로 감싼 TextInput 컴포넌트를 부모 ForwaredTextInput에 전달
// 부모 컴포넌트는 해당 컴포넌트 사용시 ref 주입
const ForwaredTextInput = forwardRef(TextInput)

export default AutoFocusTextInput;

// 지금처럼 상위 컴포넌트에서 불편하게 제어하지 않고 TextInput의 props에 isAutoFocus flag 전달로 내부에서 flag 상태값에 따른 render를 하는 구조를 더 추천