React는 재사용 가능한 컴포넌트를 생성하기 위한 강력한 라이브러리입니다. React.forwardRef()는 컴포넌트 간 데이터 전달에서 ref를 사용할 수 있게 해주는 기능입니다. 이를 활용하여 컴포넌트의 검색 기능을 구현할 수 있습니다. 이번 글에서는 React.forwardRef()를 사용하여 검색 기능을 가진 컴포넌트를 만드는 방법에 대해 알아보겠습니다.

React.forwardRef()란?

React.forwardRef()는 React 16.3 버전에서 도입된 기능으로, ref를 자식 컴포넌트로 전달하기 위해 사용됩니다. 컴포넌트에서 ref를 사용하려면 이전에는 클래스 컴포넌트를 사용해야 했지만, 함수형 컴포넌트에서도 ref를 사용할 수 있도록 해줍니다.

컴포넌트 검색 기능 구현

아래는 React.forwardRef()를 사용하여 검색 기능을 가진 컴포넌트를 구현하는 예시 코드입니다.

import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';

const SearchComponent = forwardRef((props, ref) => {
  const [searchValue, setSearchValue] = useState('');
  const inputRef = useRef(null);

  const handleSearch = () => {
    // 검색 로직 구현
  };

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return (
    <div>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
        ref={inputRef}
      />
      <button onClick={handleSearch}>검색</button>
    </div>
  );
});

export default SearchComponent;

위의 예시 코드에서는 React의 useState, useRef, useImperativeHandle, forwardRef를 사용하여 검색 기능을 가진 컴포넌트를 구현하였습니다.

• useState: 검색어를 상태로 관리하기 위해 사용합니다.
• useRef: 검색어를 입력하는 input 요소에 대한 ref를 생성하기 위해 사용합니다.
• useImperativeHandle: 부모 컴포넌트에서 자식 컴포넌트의 ref를 통해 포커스를 설정할 수 있도록 해줍니다.
• forwardRef: ref를 자식 컴포넌트로 전달할 수 있도록 만들어 줍니다.

부모 컴포넌트에서 위의 SearchComponent를 사용하면, ref를 통해 검색어 입력창에 포커스를 설정할 수 있습니다.

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

const App = () => {
  const searchRef = useRef(null);

  const handleButtonClick = () => {
    searchRef.current.focus();
  };

  return (
    <div>
      <SearchComponent ref={searchRef} />
      <button onClick={handleButtonClick}>검색어 입력 창으로 이동</button>
    </div>
  );
};

export default App;

위의 예시 코드에서는 useRef를 사용하여 SearchComponent의 ref를 생성하고, 이를 통해 검색어 입력창에 포커스를 설정하고 있습니다.

이와 같이 React.forwardRef()를 사용하여 컴포넌트의 검색 기능을 구현할 수 있습니다.

정리

React.forwardRef()를 사용하면 함수형 컴포넌트에서도 ref를 사용할 수 있게 됩니다. 이를 활용하여 검색 기능을 포함한 컴포넌트를 구현할 수 있으며, 부모 컴포넌트에서 ref를 통해 자식 컴포넌트의 기능을 조작할 수 있습니다.

#React #검색기능