01.18 window.innerWidth

페이지에 질문하기 버튼 컴포넌트를  반응형으로 만들게 되면서 궁금했던점

컴포넌트는 재사용 하는 것이 좋으니 useState를 활용한 동적인 변경 or 스타일드 컴포넌트의 media쿼리를 활용해서 만들기를 고민하다 둘다 해보기로 결정!

 

버튼이 desktop화면일 때는 (1200px이상)  질문 작성하기가 보이기!

모바일 화면( max-width: 767px) 일때는 질문 작성만 보이게 만들기

처음에는 스타일드 컴포넌트로만 만들수 있을 것 같아서 뚝딱뚝딱 해본 결과는 이렇게 잘려서 나왔다.  

 

@media (max-width: 767px) {
      width: 120px;
      height: 54px;
      white-space: nowrap;
      overflow: hidden;
    }

white-space : nowrap 를 통해서 줄속성 바꿈을 막고 overflow:hidden으로 자르면 간단하게 끝날 줄 알았는데 css는 역시 어렵다.

 

하지만 react 의 useState setState를 통해서 동적으로 브라우저의 가로길이에 따라 반응형으로 만드는게 가능하다.

window.innerWidth 는 window 의 가로길이를 정할 수 있었고

 

const handleResize = () => {
       if (window.innerWidth < 767) {
         setButtonText('질문 작성')
         return
       }
       setButtonText('질문 작성하기')
     }
     window.addEventListener('resize', handleResize)
     return () => {
       window.removeEventListener('resize', handleResize)
     }
   }, [])

window.addEventListener ( 'resize')를 사용해 window 객체에 발생되는 resize 이벤트를 감지해 변경하도록 설정해준다.

useEffect를 사용하는 이유는 렌더링이 끝난 후에 이벤트를 등록하기 위해 사용하고 

removeEventListener를 사용하지 않으면 이벤트가 붙어있는 컴포넌트가 unmount되어도 addEventListener가 남아있기 때문에 메모리 누수가 발생할 수가 있기 때문에 사용, 

그럼 깔끔하게 변경이 가능!,