React.forwardRef()는 React에서 제공하는 기능 중 하나로, ref를 다루는 컴포넌트를 구현할 때 유용합니다. 이 기능을 활용하여 레이아웃 관련 컴포넌트를 구현하는 방법을 알아보겠습니다.

React.forwardRef()란?

React.forwardRef()는 함수형 컴포넌트에서 ref를 정확히 다뤄야 하는 경우 사용할 수 있는 함수입니다. 일반적으로 함수형 컴포넌트는 ref를 작성할 수 없지만, React.forwardRef()를 사용하면 ref를 전달받아 다룰 수 있게 됩니다.

레이아웃 관련 컴포넌트 구현하기

레이아웃 관련 컴포넌트는 주로 DOM 요소의 스타일링이나 위치 조정에 사용됩니다. 예를 들어, div 요소를 감싸는 컨테이너 컴포넌트를 구현해보도록 하겠습니다.

import React from 'react';

const Container = React.forwardRef((props, ref) => {
  return (
    <div ref={ref} className="container">
      {props.children}
    </div>
  );
});

export default Container;

위 예제에서는 React.forwardRef() 함수를 사용하여 ref를 전달받아 div 요소의 ref 속성으로 할당하고, className으로 “container”를 설정한 컨테이너 컴포넌트를 구현하였습니다.

위 컴포넌트를 사용하는 예시는 다음과 같습니다.

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

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

  const handleClick = () => {
    containerRef.current.classList.add('active');
  };

  return (
    <div>
      <button onClick={handleClick}>Activate</button>
      <Container ref={containerRef}>
        <h1>Hello, World!</h1>
      </Container>
    </div>
  );
};

export default App;

위 예제에서는 Container 컴포넌트를 ref와 함께 사용하고 있습니다. containerRef는 Container 컴포넌트의 ref를 할당할 변수로 사용되며, 버튼 클릭 시 Container 컴포넌트의 ref를 활용하여 해당 컨테이너에 “active” 클래스를 추가하는 기능을 구현한 예시입니다.

이처럼 React.forwardRef() 함수를 활용하면 레이아웃 관련 컴포넌트를 구현할 때 ref를 손쉽게 다룰 수 있습니다.