useRef

useRef에 대하여

• 변경 가능한 값을 담는 상자로 객체입니다.
• ref 객체 내부의 값이 변경되어도 리렌더링이 일어나지 않습니다.
• 리렌더가 발생하여도 값이 유지됩니다.

useRef 사용예시

• 변경은 관리해야 하지만 리렌더링을 발생시키지 않아도 되는 값(ex. DOM노드 레퍼런스)

useRef 활용

• ref변경이 일어날때 특정 함수를 실행시키고자 할때

  export default function App() {
    const callbackRef = useCallback((node) => {
      if (node !== null) {
        // 동작
      }
    }, []);
  
    return (
        <div ref={callbackRef}>
          <Component />
        </div>
    );
  }
  

• ref를 하위 컴포넌트에게 전달하는 경우

  export default function App() {
    const componentRef = useRef();
  
    return (
        <div>
          <Component ref={componentRef} />
        </div>
    );
  }
  

  const Component = forwardRef((props, ref) => {
    console.log(ref);
  
    return (
      <div>
        <img
          src="url"
          alt="img"
          ref={ref}
        ></img>
      </div>
    );
  });
  

동작과정

• DOM노드의 ref prop에 useRef 반환값을 넣어줍니다.
• React는 해당 값의 .current에 해당 DOM노드의 레퍼런스를 넣어줍니다.
• 해당 DOM 노드가 변경될 때마다 React가 자동으로 .current를 업데이트합니다.

useImperativeHandle

useImperativeHandle이란?