[React Native/TS] Animation 관련 커스텀 Hooks

• 애니메이션을 적용하기 위해서는 필요한게 생각보다 너무 많다.
• 이를 사용하기 위한 커스텀 훅을 작성해서 사용해보도록 하자

useMonitorAnimatedValue

• 말 그대로 AnimatedValue를 모니터링 하기 위한 hook

1. 사용 hook
   • useState, useEffect
2. return : realAnimValue → useState가 가지고 있는 값
   

사용법

const realAnimValue = useMonitorAnimValue(animValue);
// animValue는 useRef를 이용해서 만들어진 값

useStyle

• 보통 useMemo를 해서 최적화를 해서 reRender시 새로 생성하지 않도록 설정하는 것이 일반적

const animStyle = useMemo(()=> ({opacity: animVlaue}), [])

• 이를 이용해서 custromHook 작성

사용법

const animStyle = useStyle({opacity: animValue});

useToggle

• 애니메이션의 경우 반복적인 애니메이션을 실행하고 싶은 경우가 존재한다.
• 순환하는 애니메이션을 사용하고 싶은 경우 이 customHook을 작성해서 사용한다.

주의점
1. custom 훅의 경우 반환값 타입을 정의해야 한다.
2. 초기값을 지정하여서 hook을 생성이 가능하다.
┗ 만약 hook 호출 시 인자가 없다면 초기값을 그대로 사용

사용법

const [started, toggleStarted] = useToggle(false);