React - 화면크기에 따른 반응형 웹사이트 만들기🤔

모바일로도 웹사이트를 이용할 수 있게끔, 화면크기에 따라 화면의 구성이 달라지는 반응형 웹사이트를 개발하고자 한다.

우선 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 스타일하기.