React.forwardRef()를 사용하여 컴포넌트의 뷰포트 관리 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React는 많은 기능을 제공하는 유연하고 강력한 JavaScript 라이브러리입니다. 이 중에서도 React.forwardRef()는 컴포넌트의 뷰포트 관리를 간단하게 할 수 있도록 도와주는 중요한 기능입니다.

React.forwardRef()란?

React.forwardRef()는 React 컴포넌트에서 Ref를 전달하는데 사용되는 기능입니다. Ref는 React의 독특한 기능 중 하나로, 컴포넌트에 접근할 수 있는 참조(reference)를 제공합니다.

컴포넌트의 뷰포트 관리하기

React.forwardRef()는 컴포넌트의 뷰포트 관리를 위한 몇 가지 주요한 패턴을 제공합니다.

Responsive 컴포넌트: 뷰포트의 크기에 따라 동적으로 변하는 컴포넌트를 만들 수 있습니다. 예를 들어, 화면 크기에 따라 다르게 렌더링되는 네비게이션 바를 구현할 수 있습니다.

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

const NavigationBar = forwardRef((props, ref) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  useImperativeHandle(ref, () => ({
    toggleMenu,
  }));

  return (
    <nav>
      <button onClick={toggleMenu}>Menu</button>
      {isOpen && <ul>...</ul>}
    </nav>
  );
});

export default NavigationBar;

외부 라이브러리와의 통합: 외부 라이브러리에서 제공하는 컴포넌트를 사용할 때, Ref를 통해 해당 컴포넌트에 접근할 수 있습니다. 예를 들어, react-select라는 외부 라이브러리를 사용하여 드롭다운 메뉴를 구현할 때, Ref를 통해 메뉴를 열거나 닫을 수 있습니다.

import React, { forwardRef } from 'react';
import Select from 'react-select';

const CustomSelect = forwardRef((props, ref) => {
  const selectRef = useRef();

  const toggleMenu = () => {
    selectRef.current?.focus();
    selectRef.current?.setState({ menuIsOpen: !selectRef.current?.state.menuIsOpen });
  };

  useImperativeHandle(ref, () => ({
    toggleMenu,
  }));

  return <Select ref={selectRef} {...props} />;
});

export default CustomSelect;

요약

React.forwardRef()를 사용하면 컴포넌트의 뷰포트를 관리하는 것이 간편해집니다. Responsive 컴포넌트를 구현하거나 외부 라이브러리와의 통합할 때 특히 유용합니다. 이를 통해 사용자 경험을 향상시킬 수 있으며, 코드의 재사용성을 높일 수 있습니다.

더 자세한 내용은 React 공식 문서를 참조해주세요.

#React #forwardRef