리액트 네이티브 Animated에서 useRef 활용하기

https://react.dev/reference/react/useRef

 

 

 

 

공식 문서에 나와있는 useRef에 대한 설명은 다음과 같다.

📌 useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅입니다.
📌 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
📌 ref.current 프로퍼티를 변경해도 React는 컴포넌트를 다시 렌더링하지 않습니다. ref는 일반 JavaScript 객체이기 때문에 React는 사용자가 언제 변경했는지 알지 못합니다.

 

 

값의 변경에도 재렌더링이 일어나지 않는 특징 덕분에 리액트 네이티브에서 애니메이션 기능을 구현할 때 유용하게 쓸 수 있다.

아래 코드에서처럼 useRef 안에 new Animated.ValueXY() 등을 넣어서 position이라는 변수를 만든다면, 이후에 position이라는 변수를 통해서 애니메이션이 일어나도 화면 전체에 대한 재렌더링이 일어나지 않고, position 변수와 연결된 객체만 화면에서 이동이 일어나는 것으로 보이게 할 수 있다.

  const position = useRef(new Animated.ValueXY({x: 0, y: 0})).current;

 

 

---

 

 

React Native · Learn once, write anywhere

 

React