React에서는 함수형 컴포넌트를 사용하는 경우, forwardRef()를 사용하여 ref를 전달할 수 있습니다. 이를 활용하여 SVG 아이콘 컴포넌트를 구현할 수 있습니다. 이번 블로그 포스트에서는 React의 forwardRef()를 사용하여 SVG 아이콘 컴포넌트를 구현하는 방법에 대해 알아보겠습니다.

1. React.forwardRef()란 무엇인가요?

forwardRef()는 React 16.3 버전부터 도입된 기능으로, ref를 사용하여 자식 컴포넌트로 전달할 수 있도록 해줍니다. 함수형 컴포넌트에서 forwardRef()를 사용하면 ref 객체를 직접 다룰 수 있게 됩니다.

2. SVG 아이콘 컴포넌트를 만들어보자!

아래의 예제 코드는 forwardRef()를 사용하여 SVG 아이콘 컴포넌트를 구현하는 방법을 보여줍니다. 이 예제는 React와 react-dom 패키지가 설치되어 있다고 가정하고 진행됩니다.

import React, { forwardRef } from 'react';

// SVG 아이콘 컴포넌트
const Icon = forwardRef(({ name, size, color }, ref) => {
  // 아이콘의 스타일 설정
  const style = {
    width: size,
    height: size,
    fill: color,
  };

  // 반환할 JSX
  return (
    <svg
      ref={ref}
      className={`icon-${name}`}
      viewBox="0 0 24 24"
      style={style}
    >
      {/* SVG 아이콘 내용 */}
    </svg>
  );
});

export default Icon;

위의 코드에서는 forwardRef()를 사용하여 Icon 컴포넌트를 만들고, name, size, color와 함께 props로 전달받습니다. 그리고 ref도 같이 전달받아 svg 엘리먼트에 연결해 줍니다. Icon 컴포넌트는 name을 이용해 className을 설정하고, size와 color를 스타일에 적용하여 아이콘의 크기와 색상을 설정합니다.

3. SVG 아이콘 컴포넌트 사용하기

이제 Icon 컴포넌트를 사용하여 SVG 아이콘을 렌더링해보겠습니다.

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

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

  // 아이콘 클릭 시 로직
  const handleClick = () => {
    console.log('아이콘 클릭!');
  };

  return (
    <div>
      {/* Icon 컴포넌트 사용 */}
      <Icon ref={iconRef} name="heart" size={24} color="red" />

      {/* 아이콘 클릭 이벤트 설정 */}
      <button onClick={handleClick}>아이콘 클릭</button>
    </div>
  );
};

export default App;

위의 예제 코드에서는 Icon 컴포넌트를 App 컴포넌트에서 사용하고 있습니다. ref를 사용해 아이콘의 DOM 요소에 접근할 수 있으며, handleClick 함수를 통해 아이콘 클릭 이벤트를 처리할 수 있습니다.

마무리

이제 React의 forwardRef()를 사용하여 SVG 아이콘 컴포넌트를 구현하는 방법을 알아보았습니다. forwardRef()를 사용하면 함수형 컴포넌트에서도 ref를 다룰 수 있어, 조금 더 유연하고 편리한 컴포넌트 개발이 가능해집니다. 이제 여러분은 forwardRef()를 활용하여 공통적으로 사용되는 컴포넌트(예: 아이콘, 버튼 등)를 만들어볼 수 있습니다.

참고 자료

• React 공식문서 - forwardRef()
• CSS-Tricks - A complete guide to useRef()

#React #forwardRef #SVG #아이콘 #컴포넌트