[React] 🐠forwardRef, 🐠callbackRef 사용법

▷ forwardRef

부모 컴포넌트에서 생성한 useRef를
자식 컴포넌트에게 넘길 때 사용한다.

즉, 자식 컴포넌트의 ref를 부모에게 공개하고 싶을 때 사용한다.

❗️참고) 자식 컴포넌트의 DOM 노드에 접근하는 것은 컴포넌트의 캡슐화를 파괴하기 때문에 권장되지는 않는다.

---

🐠 forwardRef 사용법

부모 컴포넌트

일반 props처럼 props.ref로 넘기지는 못한다.

// useRef 가져오기
import React, { useRef } from "react";
import Child from "./Child"

function parents() {
  const parentsRef = useRef();
  
  return (
  	<>
      <h2>여기는 부모 컴포넌트</h2>
      <Child ref={parentsRef}> // 자식 컴포넌트에게 ref를 넘김
    </>
  )
}

---

자식 컴포넌트

// forwardRef 가져오기
import React, { forwardRef } from "react";

// 함수 앞에 forwardRef붙이기
const Child = forwardRef (props, ref) => {
  
  return (
    <>
      <img src="주소" alt="img" ref={ref} /> // img의 ref를 가져옴
    </>
  )
}
      
export default Child;

forwardRef를 사용하면 높은 확률로 useImperativeHandle을 사용하게 된다.

---

🐠 useImperativeHandle

ref를 사용할 때 부모 컴포넌트에게 보여지는
인스턴스 값을 사용자화(customizes) 한다.

부모 컴포넌트

// useRef 가져오기
import React, { useRef } from "react";
import Child from "./Child"

function parents() {
  const inputRef = useRef();
  
  return (
  	<>
      <h2>여기는 부모 컴포넌트</h2>
      <Child ref={inputRef}> // 자식 컴포넌트에게 ref를 넘김
      <button onClick={() => inputRef.current.inputFocus()}>
        날 눌러도 포커스
      </button>
    </>
  )
}

자식 컴포넌트

import React, { forwardRef } from "react";

// 함수 앞에 forwardRef붙이기
const Child = forwardRef (props, ref) => {
    const inputRef = useRef();// 자식의 ref를 만듬
  
  // 첫 번째 인자는 부모의 ref
  // 부모는 이 로직을 모른다.
  // 위로 끌어올리는 게 아니라 그냥 ref.current로 접근하여 사용하는 것이다.
  useImperativeHandle(ref, () => {
    inputFocus: () => {
      inputRef.current.foucus();
    }
  })
  
  return (
    <>
      <input ref={inputRef} ... />
    </>
  )
}

---

🐠 useRef 리렌더 예시

import React, { useRef } from "react";
import Child from "./Child"

function parents() {
  const parentsRef = useRef(); // 자식에게 넘겨줄 ref 
  const myRef = useRef(0); // 부모에서만 사용할 ref
  
  const [state, setState] = useState(0);
  
  return (
  	<>
      <h2>여기는 부모 컴포넌트</h2>
      <Child ref={parentsRef}> // 자식 컴포넌트에게 ref를 넘김
    
      // 클릭할 때마다 1 증가. but, 리렌더링 시 동작은 안하고 값만 가지고 있음.
      // 4번 클릭 시 4가 안되고 0으로 보여짐.
      // 아래 "Click me!"버튼을 누르면 그제서야 4로 업데이트되어 보여진다.
      <button onClick={() => (myRef.current = myRef.current + 1)}></button>

      // 클릭하면 상태값 1 증가. myRef의 값이 업데이트 됨.
      <button onClick={() => setState(state + 1)}>Click me!</button>
      
    </>
  )
}

---

🐠 콜백ref 사용법

부모가 자식 컴포넌트에게 ref를 넘겨서
자식이 그 ref를 변경해도 부모는 알지 못한다.

만약 부모가 자식에게 넘긴 ref를 attach하거나 detach할 때
어떤 코드를 실행하고 싶다면 콜백 ref를 사용하면 된다.

즉, 자식에게 넘긴 ref의 current 값을
자세히 알고 어떤 값을 구하고 싶을때 사용한다.

부모 컴포넌트

import React, { useRef } from "react";
import Child from "./Child"

function parents() {
  // const parentsRef = useRef();
  const [height, setHeight] = useState(0);
  
  // 함수임
  const callbackRef = (node) => {
    if (node !== null) { 
       // 자식 ref의 세로 길이로 상태값 변경
      setHeight(node.getBoundingClientReact().height)
      /* DOM 메소드 getBoundingClientReact를 사용하면
         매우 간단하게 원하는 요소의 위치 값을 얻을 수 있다. */ 
    }
  }
  
  return (
  	<>
      <h2>여기는 부모 컴포넌트</h2>
      <Child ref={callbackRef}> // parentsRef가 아닌 함수를 넘겨준다.
      
      // 자식이 변경한 ref의 정보를 가져와 세로의 길이를 나타냄.
      <h3>사진 세로 길이: {height}</h3>
    </>
  )
}

---

자식 컴포넌트

// forwardRef 가져오기
import React, { forwardRef } from "react";

// 함수 앞에 forwardRef붙이기
const Child = forwardRef (props, ref) => {
  // 상태값 만들기
  const [loaded, setLoaded] = useState(false);
  
  
  
  return (
    <>
      <img src="주소" alt="img"
        ref={loaded ? ref : null}  // 로드 될 때 ref
        onLoad={() => setLoaded(true)} /> // 로드 되면 상태값 변경
        // why? 이미지라서 로드 안 되어있을 땐 부모에서 정상적으로 작동 안 하기 때문
    </>
  )
}
      
export default Child;

👉 useRef 사용법 보러가기
👉 (공식문서)useRef, Ref와 DOM
👉 (공식문서)forwardRef
👉 (공식문서)useImperativeHandle
👉 (공식문서)callbackRef 콜백ref