[오무] 리팩토링 : 모바일에서 서비스 사용 막기 + 화면 너비에 따라 콘텐츠 개수 조절하기

모바일에서 서비스 사용 막기

550px 이하인 브라우저에서 서비스를 사용할 수 없게 하려고 한다.
1. innerWidth를 가져와야하고
2. innerWidth에 따라 resize event를 추가해준다.
이때 렌더링이 너무 많이 일어날 수 있어 useEffect에 넣는다.

  const [mobile, setMobile] = useState();
  const handleResize = () => {
    let width = window.innerWidth;
    if (550 >= width) {
      setMobile(true);
    } else {
      setMobile(false);
    }
  };
  useEffect(() => {
    //----- *이부분은 처음부터 모바일로 접속시 페이지를 나타내기 위함임
    if (550 >= window.innerWidth) {
      setMobile(true);
    }
    //--------------------------------
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

말그대로 resize라서 브라우저가 조정되어야만 블락화면이 나온다.
그래서 *이부분을 추가로 넣었다.
이게 맞는 방법인가 싶긴 한데...ㅜㅜ
550px인 상태로 새로고침했을때 화면이 나와서 일단 조취를 취했다.

화면 너비에 따라 콘텐츠 조절하기

편지와 친구 모달에서 너비에 따라 콘텐츠 개수를 다르게 해야 할 필요성이 있다고 느껴졌다. 그래서 어제 한 방법이랑 비슷하게 함.

const [limit, setLimit] = useState(0);
  const handleLimit = () => {
    const width = window.innerWidth;
    if (width >= 860) {
      setLimit(8);
    }
    if (width < 860) {
      setLimit(6);
    }
    if (width < 665) {
      setLimit(4);
    }
  };
  useEffect(() => {
    window.innerWidth ? handleLimit() : 0;
    window.addEventListener('resize', handleLimit);
    return () => {
      window.removeEventListener('resize', handleLimit);
    };
  }, []);

리사이즈할때마다 limit을 핸들링하도록 하고, 처음 렌더링했을때나 새로고침했을때도 limit이 화면 너비에 따라 조절되도록 했다.
음.... 편지모달에서는 딱히 필요없을거같다