React.forwardRef()를 사용한 레거시 코드 리팩토링 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React.forwardRef()는 React v16.3 이후부터 도입된 기능으로, 기존의 레거시 코드를 리팩토링하는 데 도움을 줍니다. 이 기능은 함수 컴포넌트에서 ref를 전달할 때 유용하게 사용됩니다. 이제 React.forwardRef()를 사용하여 레거시 코드를 리팩토링하는 방법에 대해 알아보겠습니다.

React.forwardRef()란?

React.forwardRef()는 부모 컴포넌트가 자식 컴포넌트에 ref를 전달할 수 있도록 해주는 함수입니다. 이를 통해 함수 컴포넌트를 사용하더라도 자식 컴포넌트에 ref를 전달할 수 있게 됩니다.

리팩토링 예시

이제 실제로 React.forwardRef()를 사용하여 레거시 코드를 리팩토링하는 예시를 살펴보겠습니다. 다음은 Button 컴포넌트의 레거시 코드입니다.

import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

위 코드에서는 부모 컴포넌트에서 Button 컴포넌트에 ref를 전달할 수 없습니다. 이제 React.forwardRef()를 사용하여 이 문제를 해결해보겠습니다.

import React, { forwardRef } from 'react';

const Button = forwardRef(({ onClick, children }, ref) => {
  return (
    <button ref={ref} onClick={onClick}>
      {children}
    </button>
  );
});

export default Button;

위 코드에서는 React의 forwardRef 함수를 사용하여 Button 컴포넌트를 감싸고, ref를 파라미터로 전달받을 수 있도록 수정하였습니다. 이제 Button 컴포넌트를 사용하는 부모 컴포넌트에서 ref를 전달할 수 있게 되었습니다.

결론

React.forwardRef()를 사용하여 레거시 코드를 리팩토링하면 함수 컴포넌트에서 ref를 전달할 수 있게 됩니다. 이를 통해 레거시 코드를 업데이트하고 리팩토링하는 과정에서 유연성과 가독성을 개선할 수 있습니다. 리팩토링을 통해 코드의 유지 보수성을 높이고, 향후 변경이나 개선에 용이한 구조를 갖추게 됩니다. 이를 통해 더 나은 개발 경험을 제공할 수 있습니다.

참고 자료:

React 공식 문서 - React.forwardRef

#React #리팩토링