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

ww8007·2021년 8월 29일
0

ReactNative

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

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);
profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글