useref에서 상속 개념이 붙은 "ForwardRef"와 "useImperativeHandle"

보통 useRef 까지는 흔히들 안다고 생각하는데,

만약 내가 어떤 곳에서 컴포넌트들을 일괄로 정의해두고, 부모 단에서 꺼내어서 사용하는 형태의 로직을 짠다면 어떻게 될까? 이때도 ref를 다루는 case가 존재한다면?

​

정답은 ForwardRef 이다. 부모에서 자식의 ref 요소들을 다루고 싶을 때 사용하는 문법.

​

또,

자식단에 있는 function 을 부모에서 사용하고 싶다면?

(보통은 부모에서 사용하는 것이 맞지만, 무작정 그렇게 로직을 짜버리면 하위 컴포넌트 들이 많아질수록 최상위, 상위 로직이 비대해짐을 막을 수 없게 된다.)

​

정답은 useImperativeHandle 이다. 자식의 문법이나 변수를 부모 단에서 사용할 수 있게 해주는 문법.

​

우선.. forwardRef 부터...

​

forwardRef 없이 자식의 ref 를 불러오려고 시도를 해보자.

import React, { useRef } from "react";

function Input({ ref }) {
  return <input type="text" ref={ref} />;
}

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

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

 

우리가 사용하는 흔한 ref 문법이다.

이때 아마 원하는 대로 정상 작동이 되지 않고, 아래와 같은 경고 메세지가 발생할 것이다.

 

Warning: Input: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

 

​

ref는 prop이 아니기 때문에 undefine으로 설정된다는 경고 메세지 이다.

​

우리가 원하는 상위 컴포넌트에서 하위 컴포넌트의 ref 를 불러오기 위해서 필요한 개념이 ForwardRef 가 되는 것이다.

​

위를 정상 작동하는 코드로 변경해보면 아래 처럼 이루어진다.

 

import React, { forwardRef, useRef } from "react";

const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

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

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

 

 

사용법

 

1. 부모 컴포넌트에서 useRef() 를 import 및 선언해주고, 자식 컴포넌트로 보낸다.

import React, { useRef } from "react";
import Input from "./child.js"

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

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

 

2. 자식 컴포넌트의 전체를 forwardRef() 로 감싼다.

형태는 forwardRef((props,ref)=>{ }); 이며 () 의 값 형태는 고정이다.

따라서 props를 받아올때는 props.____ 로 받아와야 한다.

 

import {forwardRef} from "React"

export const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

 

UseImperativeHandle?

 

부모에서 정의한 함수를 아래로 내리는 것은 흔한 일이다.

하지만 코드 상의 이유로 인하여 자식의 함수를 부모로 보내려면?

react 에서는 useImperativeHandle 이라는 기능을 사용해주어야 한다.

​

사용법

1. forwardRef() 까지 셋팅 된 상태에서 부모에서 사용할 함수를 useImperativeHandle() 로 감싸준다.

import "./styles.css";
import React, { forwardRef, useImperativeHandle, useRef } 
from "react";
/* 1. 필요한 hook import 하기 */

const Input = forwardRef((props, ref) => {

  /* 3. 받은 동아줄 통하여 부모에게 전달해주고 싶은 것들 
바구니에 집어 넣기*/
  useImperativeHandle(ref, () => {
    childfunction
  });

  const childfunction = () => {
    console.log("I'm child function");
  };

  return <input type="text" ref={ref} />;
});

export default function App() {
  const inputRef = useRef(null);

  /* 4. 동앗줄로 전달 받은 바구니 속 물품 사용하기 */
  function handleFocus() {
    inputRef.current.childfunction();
  }

  return (
    <>
      /* 2. 자식 폼으로 동앗줄 내려주기 */
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

 

 

이런 기능을 통하여 적절한 곳에서 func이나 변수를 선언하고 관리해주는 것이 필요하며,

이런 hook을 사용하면 양방향 소통이 아닌, 단방향 소통으로 관리가 가능하기 때문에 순환참조 문제를 해결할 수 있게 된다.!

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 
궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.