React.forwardRef()를 사용하여 컴포넌트의 캐싱(Caching) 기능을 구현하는 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React는 성능 최적화를 위해 다양한 기능들을 제공합니다. 그 중 하나인 React.forwardRef()를 사용하면 컴포넌트의 캐싱 기능을 구현할 수 있습니다. 캐싱은 컴포넌트를 한 번 렌더링한 뒤에는 이전에 만들어진 인스턴스를 재사용함으로써 성능을 향상시킬 수 있는 기술입니다.

캐싱 컴포넌트 만들기

React.forwardRef()를 사용하여 캐싱 기능을 구현하려면 먼저, 캐싱할 컴포넌트를 만들어야 합니다. 이 컴포넌트는 함수형 혹은 클래스형 컴포넌트일 수 있습니다.

아래는 함수형 컴포넌트를 캐싱하는 예제입니다:

import React, { forwardRef } from 'react';

const CachedComponent = forwardRef((props, ref) => {
  // 컴포넌트의 로직 및 렌더링 코드 작성
  return <div ref={ref}>Cached Component</div>;
});

export default CachedComponent;

위 코드에서 forwardRef() 함수를 사용하여 캐싱 기능을 적용했습니다. 컴포넌트 함수의 첫 번째 인자로 props와 ref를 받는 함수를 전달합니다. ref는 컴포넌트의 ref 속성을 사용하기 위해 필요합니다. 이제 캐싱 컴포넌트를 사용하는 부모 컴포넌트에서 캐싱 기능을 활용할 수 있습니다.

캐싱 컴포넌트 사용하기

캐싱 컴포넌트를 사용하기 위해 부모 컴포넌트에서 React.createRef() 함수를 사용하여 ref를 생성합니다. 이렇게 생성된 ref는 캐싱 컴포넌트의 ref 속성에 전달되어 캐싱된 컴포넌트를 참조할 수 있게 됩니다.

import React, { useRef } from 'react';
import CachedComponent from './CachedComponent';

const ParentComponent = () => {
  const cachedComponentRef = useRef(null);

  const handleClick = () => {
    // 캐싱된 컴포넌트에 접근하여 로직을 수행
    console.log(cachedComponentRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <CachedComponent ref={cachedComponentRef} />
    </div>
  );
};

export default ParentComponent;

위 코드에서는 useRef()를 사용하여 cachedComponentRef라는 ref를 생성하였고, 이 ref를 CachedComponent 컴포넌트의 ref 속성에 전달하였습니다. 이제 handleClick 함수에서 cachedComponentRef.current를 통해 캐싱된 컴포넌트에 접근할 수 있습니다.

React.forwardRef()를 사용하여 컴포넌트의 캐싱 기능을 구현하는 방법에 대해 알아보았습니다. 캐싱은 동일한 컴포넌트를 여러 번 렌더링할 때 성능을 향상시키는데 유용합니다. 적절하게 캐싱을 활용하면 React 애플리케이션의 성능을 개선할 수 있습니다.

참고 자료:

#React #캐싱