TIL DAY 218

오늘 배운 일

React 의 Ref 전달하기

유튜버 별코딩님의 영상을 토대로 만든 나만의 코딩 일기장

이번에는 리액트의 ForwardRef 가 무엇인지 파악하고 어떻게 사용하는 건지 알아보자!

ForwardRef

• 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달할 때 사용하는 기법
• 부모 컴포넌트가 자녀 컴포넌트의 dom 요소를 접근하려고 할 때, 유용하게 쓰인다.

           <부모 /> const ref = useRef( )  -> <자식 /> <input ref={ref}

간단한 예)

App.js

import { useRef } from "react";

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

  const focus = () => {
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <input ref={inputRef} />
      <button onClick={focus}>포커스</button>
    </div>
  );
}

클릭하기 전 )

클릭 후 )

그럼 이 때, App 컴포넌트 안에 input 태그 대신 input 을 담은 컴포넌트가 있다고 하면...

어떻게 같은 기능을 구현할 수 있을까?

App.js

import { useRef } from "react";
import MyInput from "./MyInput";

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

  const focus = () => {
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <MyInput />
      <button onClick={focus}>포커스</button>
    </div>
  );
}

MyInput.js

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

export default MyInput;

이러한 상황일 때, 우리가 사용할 수 있는 기능은 바로 forwardRef 이다.

이러한 기능을 사용하면, 부모 컴포넌트는 마치 기본적인 element 에다 ref 를 전달하 듯, 자식 컴포넌트에 ref 를 전달 가능하다!

사용방식은...

ref 를 전달받을 자식 컴포넌트를 리액트에서 제공하는 forwardRef 함수로 감싸주기만 하면 된다.

forwardRef 로 감싸진 자식 컴포넌트는 새로운 두 번재 파라미터를 받게되는데 그게 바로 부모에게서 전달받은 ref 가 들어간다.

자식 컴포넌트는 전달받은 ref 를 input 태그에 ref 속성으로 넣어준다!

코드로 보면...

App.js

import { useRef } from "react";
import MyInput from "./MyInput";

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

  const focus = () => {
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <MyInput ref={inputRef} />
      <button onClick={focus}>포커스</button>
    </div>
  );
}

MyInput.js

import { forwardRef } from "react";

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

export default forwardRef(MyInput);

화면을 확인해보면 똑같이 버튼을 클릭할 때마다, input 에 focus 가 된다.

정리하면 )

• 자식 태그에 forwardRef 로 묶어주면, 컴포넌트는 두 번째 ref 라는 인자를 받게 된다.
• 그 ref 라는 인자 안에 부모로부터 전달받은 ref 가 들어있게 된다.
• forwardRef 는 리액트에 내장되어 있는 함수인거 같다.

주의할 점!

• 지나친 유연성은 단점을 부르기 좋다.
• forwardRef 를 사용해서 자식의 DOM 노드를 접근한다는 것은, 자식 컴포넌트의 캡슐화에 대한 장점을 없애는 행위이다.
  -> 자식 컴포넌트가 갖고 있는 DOM 노드를 외부로 노출시키는 것이다!
• 상황에 맞게 forwardRef 를 사용하는게 좋은 일이다.