🔥 Trouble Shooting - 모바일에서 애니메이션이 안 꺼지는 이유

🚨 문제 상황

포트폴리오 만들면서 기술 스택 섹션에 문 열리는 애니메이션을 넣었다. 데스크톱에서는 시네마틱하게 문이 열리면서 내용이 나타나고, 모바일에서는 그냥 바로 내용만 보이게 하려고 했는데...

분명히 useIsMobile 훅으로 모바일 감지해서 조건부로 처리했는데, 모바일에서도 계속 애니메이션이 적용되는 거다. 그것도 중간에 멈춰서 콘텐츠가 투명하게 고정되어 버렸다.

💻 문제 발생 코드

// ScrollAnimations.tsx
const ScrollAnimations = ({ children, className = '' }) => {
  const isMobile = useIsMobile(); // 여기서 문제!

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 모바일이 아닐 때만 문 애니메이션 생성하려고 했는데...
    if (!isMobile) {
      const sections = container.querySelectorAll('section');
      
      sections.forEach((section) => {
        const doorContent = section.querySelector('[data-direction="doorContent"]');
        
        if (doorContent) {
          doorTimeline.fromTo(
            doorContent,
            { scale: 0.9, opacity: 0, y: 10 }, // 초기 상태
            {
              scale: 1,
              opacity: 1,
              y: 0,
              duration: 0.7,
              ease: 'back.out(1.2)',
            }
          );
        }
      });
    }
  }, [isMobile]);
};

// useMediaQuery.ts - 문제의 원인이 여기 있었음
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(false); // 🚨 항상 false로 시작!

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const mql = window.matchMedia(query);
    setMatches(mql.matches); // 여기서 실제 값으로 업데이트

    const handler = (e: MediaQueryListEvent) => {
      setMatches(e.matches);
    };

    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

모바일에서 개발자 도구 확인해보니:

<div 
  style="opacity: 0; transform: translate(0px, 10px) scale(0.9, 0.9);"
>
  ...
</div>

🤔 원인 분석

완전 타이밍 문제였다.

1. 초기 렌더링: useState(false) → isMobile = false
2. useEffect 실행 전: ScrollAnimations가 실행되어 애니메이션 설정
3. GSAP이 인라인 스타일 적용: opacity: 0, scale: 0.9 등등
4. useEffect 실행 후: setMatches(true) → isMobile = true로 변경
5. 하지만 이미 늦음: 요소에 이미 스타일이 박혀버림

즉 useState 초기값이 false로 고정되어 있어서, 실제 모바일 환경에서도 처음에는 데스크톱으로 인식해서 애니메이션을 적용해버리는 거였다.

✅ 해결 방법

React의 useState Lazy Initialization을 사용했다.

// 수정된 useMediaQuery.ts
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(() => {
    <// 서버사이드에서는 false
    if (typeof window === 'undefined') return false;
    // 클라이언트에서는 실제 미디어 쿼리 결과
    return window.matchMedia(query).matches;
  });

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const mql = window.matchMedia(query);
    
    const handler = (e: MediaQueryListEvent) => {
      setMatches(e.matches);
    };

    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

차이점:

• Before: useState(false) - 무조건 false로 시작
• After: useState(() => window.matchMedia(query).matches) - 실제 미디어 쿼리 결과로 시작

🎯 해결 포인트

useState의 Lazy Initialization 개념을 이해하는 게 핵심이었다.

// 일반적인 방법
const [state, setState] = useState(initialValue);

// Lazy Initialization
const [state, setState] = useState(() => initialValue);

함수로 전달하면:

• 초기값 계산이 한 번만 실행됨
• 컴포넌트 리렌더링되어도 다시 실행 안 됨
• 외부 값에 의존하는 초기값에 특히 유용

📝 배운 점

useState 초기값 설정할 때 좀 더 신경써야겠다는 생각이 들었다. 특히:

• window 객체 사용할 때는 항상 SSR 고려
• 외부 환경에 의존하는 상태는 lazy initialization 고려
• 타이밍이 중요한 애니메이션에서는 초기값이 더욱 중요

그리고 React 렌더링 순서도 다시 한번 정리됐다:
1. useState 초기값 설정
2. 컴포넌트 렌더링
3. useEffect 실행

🔄 개선된 점

Before

const [matches, setMatches] = useState<boolean>(false);
// 모바일에서도 처음엔 false → 애니메이션 적용됨

After

const [matches, setMatches] = useState<boolean>(() => {
  if (typeof window === 'undefined') return false;
  return window.matchMedia(query).matches;
});
// 모바일에서 처음부터 true → 애니메이션 안 적용됨

결과적으로:

• ✅ 모바일에서 정확한 초기값
• ✅ 불필요한 애니메이션 방지
• ✅ SSR 환경에서도 안전

💡 추가 TIP

비슷한 상황에서 활용할 수 있는 패턴들:

// 로컬스토리지 초기값
const [theme, setTheme] = useState(() => {
  if (typeof window === 'undefined') return 'light';
  return localStorage.getItem('theme') || 'light';
});

// 복잡한 계산 결과
const [processedData, setProcessedData] = useState(() => {
  return expensiveComputation(initialData);
});

// 현재 시간 기반
const [timestamp, setTimestamp] = useState(() => Date.now());

그리고 개발자 도구에서 Network 탭 → Disable cache 체크하고 새로고침해서 테스트해보면 초기 렌더링 문제를 더 잘 잡을 수 있다.

---

결국 useState 하나 때문에 생긴 문제였지만, 덕분에 React의 렌더링 사이클과 최적화 기법을 더 깊이 이해하게 됐다.