[react] resize 적용하는 법

[react] resize 적용하는 법

 

react에서  자바스크립트의 이벤트를 이용해

미디어쿼리 적용하는 방법입니다. 

 

resize 적용 코드

const Container = () => {
	const [narrowWidth, setNarrowWidth] = useState(false)
         
	const widthControlFn = () => {
        let width = window.innerWidth
        if (width < 367) setNarrowWidth(true)//너비 367보다 작을 때 상태 변화 
        else setNarrowWidth(false)
    }
    
      useEffect(() => {
        // resize 
        window.addEventListener("resize", widthControlFn)
        return () => window.removeEventListener("resize", widthControlFn)
    }, [])
    
    return = (
    ...
    )
    
export default Container;