핵심요약 - 한 줄짜리 React에서 뷰포트 특정 구성요소를 렌더링할 수 있습니다.

React는 훌륭하고 전 세계가 만장일치로 이에 동의합니다. 모든 것을 구성 요소로 보면 개발이 훨씬 빠르고 쉬워집니다. 모든 것이 JavaScript 기반이므로 React는 애플리케이션 상태에 따라 필요한 코드만 렌더링합니다. 1000개 이상의 구성 요소와 수만 줄의 코드가 있더라도 상관 없습니다. lazy load 구성 요소를 사용하면 사용자에게 필요한 것만 로드할 수 있으며 이것이 React를 사용하는 가장 큰 이점이라고 생각합니다.

즉, React 코드베이스에서 미디어 쿼리를 작성할 때 어떤 일이 발생하는지 궁금한 적이 있습니까?

특정 뷰포트에 있어서는 안 되는 요소를 렌더링하고 css를 사용하여 숨깁니다.

이 예에서

import React from 'react';
import './Example.style.scss';

const Example = () => {
  return (
    <div className="example">
      <div className="mobile-only">I'm a fancy mobile div</div>
      <div className="desktop-only">I'm a heavy desktop div</div>
    </div>
  );
};

Example.style.scss 파일

.example {
  .mobile-only {
    @media (min-width: 768px){
      display: none;
    }
  }
  .desktop-only {
    @media (max-width: 767px){
      display: none;
    }
  }
}

Example 구성 요소가 렌더링되면 .mobile-only 및 .desktop-only 요소가 모두 DOM에서 렌더링되지만 .mobile-only div는 더 큰 뷰포트에서 숨겨지고 .desktop-only div는 css를 사용하여 더 작은 뷰포트에서 숨겨집니다display: none .

이것이 작으면 괜찮습니다. 그러나 내가 작업한 프로젝트 중 하나에서 모든 뷰포트에서 렌더링되는 무거운 데스크톱 메뉴와 무거운 모바일 메뉴가 있었습니다. Menu만 각각의 크기가 약 20Kb이어야 하고 원치 않는 20Kb가 각 사용자의 브라우저에 쉽게 로드되었습니다. 더 많은 뷰포트 특정 요소가 있는 경우 이 크기는 계속 증가합니다.

반응 양말 소개

React Socks은 뷰포트를 기반으로 구성 요소를 렌더링하는 최소 React 라이브러리입니다.

미디어 쿼리에 작별을 고하세요. 매우 멋진 구문으로 뷰포트 특정 구성 요소를 렌더링하는 방법은 다음과 같습니다.

const Example = () => {
  return(
    <Breakpoint small down>
      <MyAwesomeMobileMenu>
        This component will render only in mobile devices
      </MyAwesomeMobileMenu>
    </Breakpoint>
  );
};

const Example = () => {
  return(
    <div>
      <Breakpoint small down>
        <div>I will render only in mobile devices</div>
      </Breakpoint>

      <Breakpoint medium only>
        <div>I will render only in tablets (iPad, etc...)</div>
      </Breakpoint>

      <Breakpoint large up>
        <div>I will render in laptops, desktops and everything bigger</div>
      </Breakpoint>
    </div>
  );
};

그뿐만이 아닙니다. 자신만의 중단점을 지정하고(원하는 만큼 많이!) 프로젝트 필요에 따라 사용할 수 있습니다. 또한 프로젝트에서 한 번만 setDefaultBreakpoints 해야 합니다 😎

import { setDefaultBreakpoints } from 'react-socks';

setDefaultBreakpoints([
  { xs: 0 },
  { s: 376 },
  { m: 426 },
  { l: 769 },
  { xl: 1025 }
]);

제가 가장 좋아하는 중단점입니다

setDefaultBreakpoints([
  { cats: 0 },
  { dinosaurs: 900 }
]);

<Breakpoint cats only>
    Only cats can render me 🐈
</Breakpoint>

React Socks를 사용해야 하는 이유

번거로움 없이 뷰포트 특정 구성 요소 렌더링

고유한 중단점(예: xs, ipad, bigmonitors)을 정의하고 사용할 수 있습니다

.

뷰포트 특정 구성 요소를 지연 로드하면 앱 성능을 개선할 수 있습니다

.

사용 편의성을 위한 더 간단하고 유용한 구문

라이브러리는 npm에 게시되었으며 알파 버전입니다. 첫 번째 안정 버전을 출시하기 전에 피드백을 받고 개선하고 싶습니다.

편집: 첫 번째 안정 버전은 2018년 12월 9일에 성능 개선 및 SSR 지원과 함께 출시되었습니다. 🎉

이름이 왜 리액트삭스인지 궁금하시다면 🤷‍♂️

React Socks 컴포넌트를 편안하게 감싸 다양한 뷰포트에서 불필요한 렌더링을 방지합니다.

팬시React Socks를 얹고 모든 구성품을 감싸보자🔥

진짜 대단한데! 좋은 하루 되세요! ⚡️