useEffect로 React 반응형 구현하기

useEffect로 React 반응형 구현하기

window.addEventListener resize 이벤트로 React 반응형 구현

전체구문

  const [mobileSize, setMobileSize] = useState(false);

  const updateSize = (e) => {
    if (e.target.innerWidth <= 768) setMobileSize(true);
    else setMobileSize(false);
  };

  useEffect(() => {
    window.innerWidth <= 768 ? setMobileSize(true) : setMobileSize(false);
    window.addEventListener("resize", updateSize);
    return () => {
      window.removeEventListener("resize", updateSize);
    };
  }, []);

  return (
    <>
        {mobileSize ? <MobileSidebar /> : <Sidebar />}
    </>
  );

세부단위 설명

  const [mobileSize, setMobileSize] = useState(false);

useState로 mobileSize의 상태관리
true/false의 boolean 값으로 관리

state로 return값 관리

{mobileSize ? <MobileSidebar /> : <Sidebar />}

retrun 값으로 mobileSize true/false로 보여줄 컴포넌트 지정
삼항연산자 구문으로 return값내 바로 지정 가능

state로 return값 관리

  useEffect(() => {
    window.innerWidth <= 768 ? setMobileSize(true) : setMobileSize(false);
    window.addEventListener("resize", updateSize);
    return () => {
      window.removeEventListener("resize", updateSize);
    };
  }, []);

useEffect Hook 함수로 마운트시 이벤트 관리

window.addEventListener("resize", updateSize);

윈도우에서 resize가 발생시 updateSize 이벤트 발생

updateSize 함수

  const updateSize = (e) => {
    if (e.target.innerWidth <= 768) setMobileSize(true);
    else setMobileSize(false);
  };

이벤트 타켓 (window)의 값에 따른 setMobileSize 실행
브레이크포인트 이하로 window가 줄어들면 setMobileSize(true)로 state값이 true가 되어 사전에 설정한 리턴값에서

{mobileSize ? <MobileSidebar /> : <Sidebar />}

<MobileSidebar //> 가 실행되어 Mobile 전용 컴포넌트 구현

주의사항

    window.addEventListener("resize", updateSize);
    return () => {
      window.removeEventListener("resize", updateSize);
    };

useEffect내 return 값으로 removeEventListener을 해줄것!
이벤트 발생 후 종료시킴으로서 과부하 방지

주의사항 2

 window.innerWidth <= 768 ? setMobileSize(true) : setMobileSize(false);

useEffect 내 최초 마운트시 설정값으로 삼항조건문 추가
event 발생 시 state 관리만 되어 있기 때문에 해당 조건문이 없을시 최초 랜더링시에 setMobileSize로 state 관리 불가

참고링크