[React] 반응형 디자인 직접 코드로 구현해보기

 

반응형 디자인 직접 코드로 구현해보기

커스텀 반응형 구현하기

 

---

 

 웹 개발을 하던 중 문득 궁금해졌다. 반응형 디자인을 직접 만들어 보면 어떨까?! css 라이브러리 혹은 @media로 구현하던 반응형 디자인을 React 코드로 구현할 수 있을까? 직접 구현해보면 재밌을 것 같아서 찾아본 결과, useEffect를 사용하면 가능하다는 걸 알게 되었다. 🥴

 

 

# 화면 사이즈에 event 걸기

 

  const [screenWidth, setScreenWidth] = useState(window.innerWidth);

  useEffect(() => {
    const changeScreenWidth = () => {
      setScreenWidth(window.innerWidth);
    };
    window.addEventListener("resize", changeScreenWidth);
    return () => {
      window.removeEventListener("resize", changeScreenWidth);
    };
  }, []);

  const resposiveWidth = screenWidth <= 700 ? "200px" : "300px",
  const resposiveHeigth = screenWidth <= 700 ? "200px" : "300px",

 

 React에서 addEventListener를 이용하려면 보통 useEffect 안에서 선언하는 것 같다. useEffect 안에서 addEventListener를 이용하여 화면 사이즈에 대한 값을 받아오고, 그 값을 useState에 넣는다. 그리고 useState 안에 들어간 화면 사이즈 값에 조건문을 걸면 끝! 예시 코드는 화면의 가로 길이가 700 이하가 되었을 때 특정 컴포넌트의 가로, 세로 길이를 변경하는 코드이다.

 

 나중에 npm 오픈소스로 라이브러리를 직접 만들어볼 계획인데, 라이브러리에 반응형 기능을 추가하려면 이런 방법을 사용하면 될 것 같다!