React forwardRef

forwardRef 

- 부모 컴포넌트에서 자식 컴포넌트의 ref 를 다루고 싶을 때 사용함

자식 컴포넌트의 값을 부모로 올리는 것이 어려우므로 ref 를 부모 컴포넌트에서 만들어서 자식에게 내려보내주어야 함.

 

forwardRef 사용 방법

import React, { forwardRef } from "react";

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

export default Component;

import React, { forwardRef } from "react";

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

export default forwardRef(Component);

- ref 를 받아 올 자식 컴포넌트에게 forwardRef 으로 감싸주면 된다. 감싸주는 방법은 두가지로 위와 같다

- forwardRef 을 사용하면 두 가지 인자를 받아올 수 있는데, 첫 번째는 props , 두 번째는 ref 이다.

 

부모 컴포넌트가 전달하는 방법

function App() {

  const inputRef = useRef()

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

  return (
    <div>
      <Component ref={inputRef}/>
      <button onClick={focus}>Focus</button>
    </div>
  );
}

- ref 속성을 사용해서 inputRef 을 전달해주면 된다.

ref 말고 다른 이름의 속성을 사용해서 전달하는 것은 React 공식 문서에서 권유하지 않고 있다.

 

지나친 유연성은 독이 된다!

- forwardRef 를 사용하면 자식 컴포넌트의 캡슐화에 대한 장점을 없애는 행위라고 볼 수 있음.
- 자식 컴포넌트의 DOM 노드를 외부로 노출하기 때문에 굳이 필요할 때가 아니라면 forwardRef 를 사용하지 않는 것이 좋다.