React는 재사용 가능한 컴포넌트를 만들기 위한 매우 강력한 라이브러리입니다. 컴포넌트를 다른 컴포넌트로 래핑하고 필요한 데이터를 필터링하는 경우가 많이 있습니다. 이번 글에서는 React.forwardRef()를 사용하여 컴포넌트의 데이터 필터링 방법을 알려드리겠습니다.

React.forwardRef()란?

React.forwardRef()는 React 16.3 버전부터 소개된 기능으로, 특정 컴포넌트가 ref를 전달받을 수 있도록 해줍니다. 이를 통해 컴포넌트 간에 데이터를 전달하거나 조작하는 작업을 더욱 유연하게 할 수 있습니다.

컴포넌트에 데이터 필터링 적용하기

먼저, 데이터를 필터링하고자 하는 컴포넌트를 생성합니다. 예를 들어, FilterableList 컴포넌트가 있다고 가정해보겠습니다.

import React from 'react';

function FilterableList(props, ref) {
  // 필터링 로직 작성

  return (
    <div>
      {/* 필터링된 데이터를 렌더링 */}
    </div>
  );
}

export default React.forwardRef(FilterableList);

위 코드에서 FilterableList 컴포넌트는 props와 ref를 전달받습니다. 필터링 로직을 작성하고, 필터링된 데이터를 렌더링하는 부분을 채우면 됩니다.

이제, 다른 컴포넌트에서 FilterableList를 사용하여 필터링된 데이터를 렌더링해보겠습니다.

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

function App() {
  const filterableListRef = useRef();

  const handleFilter = () => {
    // 필터링 로직 작성

    // 필터링된 데이터를 사용하기 위해 ref를 통해 접근
    if (filterableListRef.current) {
      // 필터링된 데이터에 대한 작업 수행
      // 예: 상태 업데이트, 데이터 조작 등
    }
  }

  return (
    <div>
      {/* 필터링에 필요한 컴포넌트들 */}
      <button onClick={handleFilter}>Filter</button>
      <FilterableList ref={filterableListRef} />
    </div>
  );
}

export default App;

위에서는 App 컴포넌트에서 FilterableList에 필요한 데이터를 전달하고, 필터링된 데이터에 대한 작업을 수행하는 방법을 보여주고 있습니다. useRef를 사용하여 FilterableList 컴포넌트의 ref를 생성하고, 필터링 로직을 작성한 후 해당 ref를 통해 필터링된 데이터에 접근할 수 있습니다.

마무리

React.forwardRef()를 사용하여 컴포넌트의 데이터 필터링을 구현하는 방법을 알아보았습니다. 이를 통해 여러 컴포넌트 간에 데이터를 유연하게 전달하고, 필터링된 데이터에 대한 작업을 수행할 수 있습니다. 이를 활용하여 더욱 강력하고 재사용 가능한 React 컴포넌트를 구현해보세요.