[🚨BUG] 홈페이지에서 애니메이션이 간헐적으로 실행되지 않는 오류

[otcroz]

버그 설명
홈페이지에서 애니메이션이 간헐적으로 실행되지 않는 오류입니다.
홈페이지에 처음 접속했을 때, 페이지에서 스크롤 애니메이션이 실행되지 않습니다.
원인을 살펴봤을 때, 애니메이션을 실행시키는 scope를 인식하지 못하는 오류였습니다.

사진은 홈페이지에서 애니메이션이 실행되지 않았을 때 콘솔에 찍히는 로그를 캡쳐했습니다.

버그 재현

1. 홈페이지 접속한다.

2. 애니메이션이 실행되지 않음을 확인할 수 있다.

3. 마이페이지에 접속했다가 홈페이지로 이동한다.

4. 애니메이션이 잘 실행된다.

[otcroz]

🚨애니메이션이 간헐적으로 실행되지 않았던 이유

• 리액트 컴포넌트 return 문에서 조건문 때문에 발생한 오류였던 것이다.

1. 이전 코드
   최상위 컴포넌트에 조건문을 주었기 때문에 10개의 문장을 get하는 API가 호출될 때까지 컴포넌트가 생성되지 않는다.
   즉, 컴포넌트가 아직 렌더링되지 않은 상태에서 selector를 사용하여 컴포넌트를 불러오지 못하게 되었고,
   애니메이션이 동작하지 않게 된다.

    return (
        !tenQuoteQuery.isLoading  && tenQuoteQuery.data &&
        <>
            <Background>
                {RandomFlowTextFuxc()}

2. 이후 코드
   RandomFlowTextFuxc()에 대해서만 조건을 설정하여 컴포넌트의 렌더링이 쿼리에 의존하지 않도록 변경했다.

    return (
        <>
            <Background>
                {!tenQuoteQuery.isLoading  && tenQuoteQuery.data && RandomFlowTextFuxc()}