Younho9 NotesForwarding Refs
- 컴포넌트의 자식 중 하나에 ref를 전달하는 기법.
- 재사용 가능한 컴포넌트 라이브러리와 같은 컴포넌트에서는 유용할 수 있다.
jsx
function FancyButton(props) {
return <button className="FancyButton">{props.children}</button>;
}
//=>
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 이제 DOM 버튼으로 ref를 직접 받을 수 있다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
function FancyButton(props) {
return <button className="FancyButton">{props.children}</button>;
}
//=>
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 이제 DOM 버튼으로 ref를 직접 받을 수 있다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;