forwardRef

forwardRef

컴포넌트에 ref prop을 전달해서
해당 컴포넌트 내부에 있는 DOM 에 접근을 가능하게 해줌

 

import { useRef } from 'react';

function App() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

export default App;

버튼 클릭 시 input 요소가 정상적으로 focus 됨

 

import React from 'react';

const ChildComponent = ({ ref }) => {
  return <input ref={ref} />;
};

export default ChildComponent;

import { useRef } from 'react';
import ChildComponent from './ChildComponent';

function App() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

export default App;

input 요소를 가진 자식 컴포넌트를 따로 만들고

해당 컴포넌트를 import 해서 ref 라는 이름으로 useRef 를 전달해 줌

 

버튼 클릭 시 input 요소가 정상적으로 focus 되지 않고 에러 발생

ref prop은 key prop과 같이 일반적인 prop 으로 전달할 수 없음 !!

이  때 사용하는 것이 forwardRef !!

 

import React, { forwardRef } from 'react';

const ChildComponent = (props, ref) => {
  return <input ref={ref} />;
};

export default forwardRef(ChildComponent);

1. import 할 자식 컴포넌트 내부에서 forwardRef 로 감싸주기
2. 첫번째 인자로 props를 받고, 두번째 인자로 ref를 전달받을 수 있음

ref 가 정상적으로 전달됨 !

 

forwardRef 를 너무 많이 사용하면 좋지 않은 이유

자녀 컴포넌트의 DOM 노드에 접근하기 때문에 컴포넌트 간 결합도를 증가시킴
결합도가 높아지면 관리가 어려워지고 각 컴포넌트의 캡슐화의 장점이 떨어지게 됨