반응형

아마 걱정하셨겠지만 이제 웹사이트를 반응형으로 만들 시간이에요!

이제 모바일 버전으로 데스크톱 버전에서 했던 모든 것을 재현해야 해요!

농담이에요 🤭, 모바일에서 3D 장면이 잘 보이도록 몇 가지 기술을 사용할 거예요.

3D 장면을 반응형으로 만드는 것은 완벽한 솔루션이 없다는 것을 강조하고 싶습니다. 여러 요인에 달려 있습니다:

• 장면의 복잡성
• 요소의 수
• 성능
• 이루고 싶은 목표

CSS 부분에서는 미디어 쿼리를 사용하여 쉽게 웹사이트를 반응형으로 만들 수 있습니다.

useMobile

3D 장면을 반응형으로 만들기 위해 두 가지 기술을 사용할 것입니다:

• 사용할 수 있는 너비에 따라 항목의 기본 위치와 크기를 변경합니다. 특정 임계값 이후에는 모바일 버전으로 전환합니다.
• scaleFactor를 기반으로 항목의 위치와 크기를 세밀하게 조정합니다. 장면은 1980px 화면에서 완벽해 보이지만 1600px 화면에서는 어떻게 보일까요? scaleFactor를 사용하여 항목의 위치와 크기를 조정하여 동일한 외관을 유지합니다.

두 가지 기술을 처리하기 위해 src/hooks 폴더에 useMobile 훅을 생성해봅시다:

Copy
import { useState } from "react";

const REFERENCE_WIDTH = 1920;
const MOBILE_THRESHOLD = 990;

export const useMobile = () => {
  const [scaleFactor, setScaleFactor] = useState(
    window.innerWidth / REFERENCE_WIDTH
  );
  const [isMobile, setIsMobile] = useState(
    window.innerWidth <= MOBILE_THRESHOLD
  );
  return {
    scaleFactor,
    isMobile,
  };
};

우리는 useState 훅을 사용하여 scaleFactor와 isMobile 값을 저장합니다. 이러한 값이 변경될 때 리렌더링을 강제합니다.

우리는 항목을 배치하는 데 사용한 완벽한 너비와 모바일 임계값(모바일 버전으로 전환할 때)을 정의하기 위해 두 개의 상수를 사용합니다.

나는 이 훅이 다른 프로젝트에서도 재사용 가능하도록 하기 위해 이러한 변수에 대해 config를 사용하지 않기로 했습니다.