모바일로도 웹사이트를 이용할 수 있게끔, 화면크기에 따라 화면의 구성이 달라지는 반응형 웹사이트를 개발하고자 한다.
우선 recoil을 이용하여 화면 크기에 따라 값이 변하는 변수를 사용할 수 있도록 하자.
#index.tsx
<RecoilRoot>
<App />
</RecoilRoot>
#atom.ts
import { atom } from "recoil";
export const resizeState = atom({
key: "resize",
default: "Web" || "Mobile",
});
그리고 화면크기가 변하면, 이에 따라 변수의 값을 변경할 수 있도록 코드를 작성하자.
#APP.tsx
import { useRecoilState } from "recoil";
function App() {
const [screen, setScreen] = useState(window.outerWidth);
//최초의 screen크기 부여
const [large, setLarge] = useRecoilState(resizeState);
useEffect(() => {
const handleResize = () => {
setScreen(window.outerWidth);
};
window.addEventListener("resize", handleResize);
//resize이벤트 부여로 handleResize 작동
if (screen > 550) {
setLarge("Web");
} else if (screen <= 550) {
setLarge("Mobile");
}
//스크린크기에 따라 atom값 변경
console.log(large);
return () => {
window.removeEventListener("resize", handleResize);
};
//addEventListner를 통해 이벤트를 등록하고 난 뒤 이벤트 등록을 해제해주지 않으면 메모리 누수등이 일어날 수 있다. 그러므로 컴포넌트가 언마운트 될 때 꼭 이벤트 등록을 해제해주어야 한다.
});
return (
............
화면크기에 따라 atom값 변경 성공!
이제 해당 atom값으로 컴포넌트에 props를 주어 반응형 웹사이트를 만들어보자.
styled 컴포넌트 사용법 : Styled-Components로 React 스타일하기.