[RN] react-native useRef 사용방법

반응형

 

🐰: 구현하고자 했던 내용은 자동 스와이프 되는 Carousel 배너가

다른 화면을 다녀오면 첫번째 배너로 초기화 되게 하는 기능을 구현하고자 했다.

 

 

---

 

UseRef 란?

 

참조를(reference)를 생성하고 관리하기 위해 사용되는 hook 이며, 함수형 컴포넌트 내에서 가변적인 상태를 유지하고 업데이트하는데 사용된다.

 

import { useRef } from 'react';

  //1. useState 상태 훅을 선언하여
  //currentIndex: 현재 캐러셀의 인덱스를 저장하는
  //setCurrentIndex: currentIndex를 업데이트 하는 함수
  const [currentIndex, setCurrentIndex] = useState(0);
  

  //2.캐러셀 컴포넌트에 접근하기 위한 참조
  //초기값은 null
  const carouselRef = useRef(null);
  
  
    <Carousel
      //ref 속성을 통해 carouselRef를 전달
      ref={carouselRef}
      //캐러셀 컴포넌트가 특정 아이템으로 스냅(이동)될 때마다 현재 인덱스를 상태로 저장하고, 이 상태를 다른 곳에서 사용할 수 있도록 함.
      //useRef를 사용해 캐러셀 컴포넌트에 직접 접근가능
      onSnapToItem={(index: number) => setCurrentIndex(index)}
    />

 

여기서 onSnapToItem은 Carousel라이브러리의 Callbacks Prop중 하나로,

항목에 스냅한 후 콜백이 실행되게 해준다.

 

---

 

위와같이 구현하면 캐러셀 배너가 다른 화면을 다녀와도

첫 배너부터 롤링된다.