헤더 값을 관리하기 위한 라이브러리
공식문서에 나온 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>
);
}
};
성능 최적화를 위해 지연시켜 불러오는 기능을 하는 듯 함
<LazyLoad height={200} offset={100}>
<MyComponent />
</LazyLoad>
LazyLoad
로 감싸고 높이만 설정할 경우 성능향상이 되는듯 하고(미리 높이를 알아서 그런가 싶다)
오프셋을 같이 설정하면 스크롤을 해서 설정한 오프셋이 나올때 불러오는듯 하다.
(정확한 정보를 찾지못해 문서를 보고 이해함)
미디어쿼리를 쉽게 설정하기 위해 사용하는 라이브러리로 보임
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 && ...}