Home 컴포넌트

import './Home.css'
import Menu from '../components/Menu';
import { useEffect, useRef } from 'react';

function Home() {
  let centerText = useRef();

  useEffect(() => {
      centerText.current.classList.add("centerStart");
  }, [])

  return (
    <>
      <Menu />
      <span ref={centerText} className="center">Quest Production</span>
    </>
  )
}

export default Home;

Path "/"에 일치하는 사용자에게 첫번째로 보여줄 컴포넌트 Home이다. 재사용 가능한 Menu 컴포넌트가 부착되어있으며 중앙에는 span 태그를 사용하여 문구를 지정하였다.

DOM tree -> CSSOM 트리 -> 렌더 트리 -> 레이아웃 -> 페인트 -> 합성 & 렌더 과정을 거쳐서 페이지가 완성되는 것을 기반으로 생각해보자.
Span DOM 태그를 react에서 참조하기 위해 함수형 컴포넌트 메소드인 useRef()를 사용하였다. 참조된 element는 useEffect hook이 실현시키는 컴포넌트 생명 주기에 따라 DOM mount시 Span태그에 클래스를 추가시켜 re-render과정을 실행하게 되고 이는 곧 애니메이션과 직결된다.

css

.center {
    transition: all;
    transition-duration: 1s;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    position: absolute;
}

.centerStart {
    top: 50%;
    opacity: 1;
}

.center {
    font-size: 7rem;
}

@media screen and (max-width: 414px) {
    .center {
        font-size: 2.8rem;
    }
}

Span태그를 absolute로 설정하고 opacity 0, top을 100%로 만들어 viewport 외부에 둔다. transition과 duration을 설정하여 Animation 준비를 한 뒤, centerStart class가 추가되어 opacity 1, top 50%를 1초 기간으로 repaint시키는 형태이다.

반응형 웹(responsive-web)을 위하여 미디어 쿼리를 사용한다. 미디어 쿼리가 적용되기 전 작성된 CSS가 선적용된 다음 Viewport 크기가 414px 이하 일때 기존 CSS에 덮어씌우는 형식으로 작동된다.