반응형 위젯 구축

프롤로그

모바일 시대의 반응형 인터페이스는 단순히 좋은 기능 그 이상입니다. 좋은 사용자 경험을 보장하는 앱이나 웹사이트의 중요한 특성 중 하나입니다. 그리고 이를 실현하는 강력한 도구인 Media Queries을 얻었습니다.

미디어 쿼리는 상당히 포괄적인 기능 세트를 제공하지만 여전히 한계가 있습니다. 내가 위젯을 구축하는 동안 우려했던 것 중 하나는 특정 요소의 크기가 아닌 viewport에만 기반하여 레이아웃을 조정할 수 있다는 것입니다.

Container Queries이라는 곧 출시될 기능이 있습니다. 이 기능은 브라우저에서 한 번 지원하면 더 많은 유연성을 제공할 것입니다. 현재 specification은 작업 중인 초안이며 곧 널리 사용 가능할 것으로 기대할 수 없습니다.

지금 사용해 보고 싶다면check out 어떤 브라우저에서 이미 이에 대한 실험적 지원을 추가했는지 확인하십시오.

본론으로 들어가겠습니다.

"요점"

같은 페이지에 있기 위해 먼저 문제를 정의합시다.

요소의 크기를 알아야 하는 이유는 무엇입니까?
음, 다양한 크기 변형에 적응할 수 있도록 내부 콘텐츠를 만들고 싶을 수 있기 때문입니다. 위젯의 경우 위젯이 배치되는 컨테이너의 크기를 알 수 없습니다. 아시다시피 미디어 쿼리는 뷰포트와 함께 작동하기 때문에 별로 도움이 되지 않습니다.

최소한의 솔루션은 분명하고 간단합니다. 위젯 구성 요소를 사용하는 개발자가 적용할 레이아웃을 결정할 수 있도록 소품을 추가하세요. 어떤 레이아웃 변형이 가장 좋은지 스스로 가정하지 않고 개발자에게 선택할 권리를 주기 때문에 구성 요소 라이브러리에 적합합니다.

그러나 상자에서 꺼내자마자 위젯을 반응형으로 만드는 것이 도움이 될 수 있는 특정한 경우가 있습니다. 특히 비주얼 빌더 또는 비개발자를 위한 다른 도구를 사용하는 경우.

코드를 작성할 시간입니다.
Reactrefs는 DOM 요소에 대한 액세스를 제공할 수 있으므로 너비에 따라 레이아웃을 조정할 수 있습니다.

import { useState, useCallback } from "react";

function Widget() {
  const [layoutVariant, setLayoutVariant] = useState("default");
  const updateLayoutVariant = useCallback((element: Element | null) => {
    if (element) {
      const rect = element.getBoundingClientRect();
      setLayoutVariant(rect.width < 300 ? "narrow" : "default");
    }
  }, []);

  return <Layout variant={layoutVariant} ref={updateLayoutVariant} />;
}

그리고 그것은 충분히 잘 작동합니다.
귀하의 요구 사항을 충족한다면 계속 사용할 수 있습니다!

위의 코드에서는 구성 요소가 마운트될 때 레이아웃 변형을 한 번만 설정합니다. 후속 렌더링 또는 창 크기 조정으로 인해 구성 요소 수명 동안 컨테이너의 너비가 변경될 것으로 예상되는 경우 솔루션을 일부 개선해야 합니다.

import {
  useState,
  useRef,
  useCallback,
  useEffect,
  useLayoutEffect
} from "react";

function Widget() {
  const [layoutVariant, setLayoutVariant] = useState("default");
  const containerRef = useRef<HTMLDivElement | null>(null);
  const updateLayoutVariant = useCallback(() => {
    if (containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      setLayoutVariant(rect.width < 300 ? "narrow" : "default");
    }
  }, []);

  useEffect(() => {
    window.addEventListener("resize", updateLayoutVariant);
    return () => {
      window.removeEventListener("resize", updateLayoutVariant);
    };
  }, [updateLayoutVariant]);

  useLayoutEffect(() => {
    updateLayoutVariant();
  });

  return (
    <Layout variant={layoutVariant} ref={containerRef} />
  );
}

이제 위젯의 레이아웃을 업데이트해야 하는지 확인하지만 코드가 조금 더 복잡해졌습니다.

도움이 될 수 있는 오픈 소스 유틸리티가 있습니다.
react-use-measure , react-use-rect .

기사를 읽어주셔서 감사합니다! 잘 활용하시길 바랍니다.