[ TIL] react-helmet과 react-lazyload

choiuhana·2021년 9월 28일
0

TIL

목록 보기
30/37

react-helmet

헤더 값을 관리하기 위한 라이브러리
공식문서에 나온 sample code

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

react-lazyload

성능 최적화를 위해 지연시켜 불러오는 기능을 하는 듯 함

<LazyLoad height={200} offset={100}>
        <MyComponent />
      </LazyLoad>

LazyLoad로 감싸고 높이만 설정할 경우 성능향상이 되는듯 하고(미리 높이를 알아서 그런가 싶다)
오프셋을 같이 설정하면 스크롤을 해서 설정한 오프셋이 나올때 불러오는듯 하다.
(정확한 정보를 찾지못해 문서를 보고 이해함)

react-responsive

미디어쿼리를 쉽게 설정하기 위해 사용하는 라이브러리로 보임

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {

  const handleMediaQueryChange = (matches) => {
    // matches will be true or false based on the value for the media query
  }
  const isDesktopOrLaptop = useMediaQuery(
    { minWidth: 1224 }, undefined,  handleMediaQueryChange
  );

  return (
    <div>
      ...
    </div>
  )
}

responsive의 useMediaQuery를 불러오고 변수명을 정한 후 크기를 지정해주면 되는듯 함.

변수를 기준으로 조건부 랜더링을 걸면 되는듯

{isDesktopOrLaptop && ...}
profile
만드는 사람도 사용하는 사람도 편하고 만족하는 '것'을 추구하는 프론트엔드 개발자

0개의 댓글