React.forwardRef()를 사용하여 컴포넌트의 캐러셀(Carousel) 기능을 구현하는 방법에 대해 알려주세요.

10 Nov 2023

reactjs

캐러셀(Carousel)은 사용자에게 이미지나 콘텐츠를 보여주는 인기있는 UI 패턴입니다. React에서는 React.forwardRef()를 사용하여 자식 컴포넌트가 부모 컴포넌트로부터 ref를 받을 수 있도록 할 수 있습니다. 이 글에서는 React.forwardRef()를 활용하여 실습을 진행해보겠습니다.

1. 캐러셀 컴포넌트 생성하기

먼저, Carousel 컴포넌트를 생성해야 합니다. 이 컴포넌트는 사용자에게 캐러셀의 이미지를 보여주는 역할을 할 것입니다. 아래의 코드를 참고하여 Carousel 컴포넌트를 생성해보세요.

import React from "react";

const Carousel = React.forwardRef((props, ref) => {
  // 캐러셀 컴포넌트 로직 구현

  return (
    // 캐러셀 컴포넌트 JSX 반환
  );
});

export default Carousel;

2. 캐러셀 컴포넌트 사용하기

이제, Carousel 컴포넌트를 다른 부모 컴포넌트에서 사용해보겠습니다. 아래의 예시 코드를 참고하여 실제 사용 예시를 구현해보세요.

import React, { useRef } from "react";
import Carousel from "./Carousel";

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

  const handleNext = () => {
    // 캐러셀 다음 이미지로 이동하는 로직 구현
    carouselRef.current.next();
  };

  const handlePrevious = () => {
    // 캐러셀 이전 이미지로 이동하는 로직 구현
    carouselRef.current.previous();
  };

  return (
    <div>
      <Carousel ref={carouselRef}>
        {/* 캐러셀 이미지 아이템들 */}
      </Carousel>
      <button onClick={handlePrevious}>Previous</button>
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

export default App;

위의 코드에서 Carousel 컴포넌트를 사용하는 부분을 살펴보면, ref 속성을 통해 carouselRef를 Carousel 컴포넌트의 ref로 지정하고 있습니다. 이렇게 하면 App 컴포넌트에서 해당 ref를 사용하여 Carousel 컴포넌트의 메서드를 호출할 수 있게 됩니다.

3. 캐러셀 컴포넌트 로직 구현하기

Carousel 컴포넌트의 로직을 구현해야합니다. 예를 들어, 다음 이미지로 이동하는 next(), 이전 이미지로 이동하는 previous() 메서드를 구현할 수 있습니다. 이 메서드는 ref를 통해 호출되므로, Carousel 컴포넌트 내부에 ref 변수를 사용하여 로직을 구현해야 합니다.

import React, { useState, useEffect } from "react";

const Carousel = React.forwardRef((props, ref) => {
  const [currentImage, setCurrentImage] = useState(0);
  const [images, setImages] = useState([]);

  useEffect(() => {
    // 이미지 데이터를 가져오는 로직 구현
    // setImages(imagesData);
  }, []);

  const next = () => {
    setCurrentImage((prevImage) => (prevImage + 1) % images.length);
  };

  const previous = () => {
    setCurrentImage((prevImage) => (prevImage - 1 + images.length) % images.length);
  };

  return (
    <div>
      {/* 캐러셀 이미지 출력 */}
      <img src={images[currentImage]} alt="Carousel Image" />
    </div>
  );
});

export default Carousel;

위의 코드에서는 useState 훅을 사용하여 현재 이미지와 이미지 목록을 관리하고, useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 이미지 데이터를 가져오는 로직을 구현하였습니다.

마치며

React.forwardRef()를 사용하여 Carousel 컴포넌트를 구현하는 방법에 대해 알아보았습니다. 이 방법을 사용하면 부모 컴포넌트에서 자식 컴포넌트의 메서드를 호출할 수 있으므로 캐러셀과 같은 UI 컴포넌트를 더욱 유연하게 활용할 수 있습니다. 앞으로 이 방법을 사용하여 다양한 컴포넌트를 구현해보세요!

#React #ForwardRef