Framer useInView 커스텀하기

1 minute read

2024-07-28

framer motion 패키지에서 useInView 를 자주 사용하게 된다. (공식문서)

주로 들어왔을 때 로직을 작성하는데 이를 반복적으로 if 를 상단에 처리하게 되는데 커스텀 훅으로 개선할 수 있다.

function useWhenInView(isInView: boolean, callback: () => void) {
  useEffect(() => {
    if (!isInView) {
      return;
    }
 
    callback();
  }, [isInView, callback]);
}

위와 같이 선언하게 되면 뷰포트에 들어왔을 때 로직에만 집중할 수 있다.

아래와 같이 작성 가능해진다.

useWhenInView example

  useWhenInView(isFirstInView, () => {
    syncInViewPosition(0);
  });
  useWhenInView(isSecondInView, () => {
    syncInViewPosition(1);
  });
  useWhenInView(isThirdInView, () => {
    syncInViewPosition(2);
  });
  useWhenInView(isForthInView, () => {
    syncInViewPosition(3);
  });