클로저를 활용하여 React.forwardRef()를 구현하는 방법에 대해 알려주세요.
React에서는 forwardRef()라는 기능을 제공하여, 자식 컴포넌트로 ref를 전달할 수 있도록 해줍니다. 이 기능을 클로저를 활용하여 구현해보도록 하겠습니다.
1. 클로저를 이용한 forwardRef() 구현
const forwardRef = (Component) => {
return React.forwardRef((props, ref) => {
return <Component {...props} forwardedRef={ref} />
});
};
위 코드에서는 forwardRef()라는 클로저 함수를 정의하고, 그 안에서 React.forwardRef()를 호출합니다. forwardRef() 함수는 Component라는 매개변수를 받아와서 React.forwardRef()를 호출한 뒤, Component를 렌더링하는 JSX를 반환합니다.
React.forwardRef()는 컴포넌트에 ref를 전달하기 위한 forwardRef 함수를 리턴하는 함수입니다. 이렇게 반환된 함수는 자식 컴포넌트로 전달됩니다.
forwardRef() 함수 내부에서는 forwardedRef라는 prop을 추가하여 자식 컴포넌트에 ref를 전달하는 역할을 합니다.
2. forwardRef()를 사용하는 방법
const ChildComponent = React.forwardRef((props, ref) => {
return <div ref={ref}>자식 컴포넌트</div>;
});
const ParentComponent = () => {
const ref = React.useRef();
return (
<div>
<ChildComponent ref={ref} />
</div>
);
};
const App = () => {
return (
<div>
<ParentComponent />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
위 코드에서는 ChildComponent라는 함수형 컴포넌트를 React.forwardRef()를 사용하여 정의하였습니다. ref라는 매개변수를 받아와서 JSX에서 div에 ref를 설정하도록 하였습니다.
ParentComponent에서는 useRef()를 이용하여 ref 객체를 생성하고, ChildComponent에 ref를 전달하여 자식 컴포넌트에 접근할 수 있도록 합니다.
마지막으로 App 컴포넌트를 렌더링하여 출력합니다.
이와 같이 클로저를 활용하여 React.forwardRef()를 구현하고 사용할 수 있습니다.