유튜버 별코딩님의 영상을 토대로 만든 나만의 코딩 일기장
이번에는 리액트의 ForwardRef 가 무엇인지 파악하고 어떻게 사용하는 건지 알아보자!
<부모 /> const ref = useRef( ) -> <자식 /> <input ref={ref}
간단한 예)
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 을 담은 컴포넌트가 있다고 하면...
어떻게 같은 기능을 구현할 수 있을까?
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>
);
}
const MyInput = (props) => {
return <input ref={} />;
};
export default MyInput;
이러한 상황일 때, 우리가 사용할 수 있는 기능은 바로 forwardRef 이다.
이러한 기능을 사용하면, 부모 컴포넌트는 마치 기본적인 element 에다 ref 를 전달하 듯, 자식 컴포넌트에 ref 를 전달 가능하다!
ref 를 전달받을 자식 컴포넌트를 리액트에서 제공하는 forwardRef 함수로 감싸주기만 하면 된다.
forwardRef 로 감싸진 자식 컴포넌트는 새로운 두 번재 파라미터를 받게되는데 그게 바로 부모에게서 전달받은 ref 가 들어간다.
자식 컴포넌트는 전달받은 ref 를 input 태그에 ref 속성으로 넣어준다!
코드로 보면...
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>
);
}
import { forwardRef } from "react";
const MyInput = (props, ref) => {
return <input ref={ref} />;
};
export default forwardRef(MyInput);
화면을 확인해보면 똑같이 버튼을 클릭할 때마다, input 에 focus 가 된다.