React에서 창 크기 조정 이벤트에 응답
이 기사에서는 창 크기가 변경될 때 웹 사이트 콘텐츠를 변경하도록 React 구성 요소를 설정하는 방법을 알려줍니다.
React에서 창 크기 조정
때때로 React 개발자는 사용자가 창 크기를 조정할 때마다 응답해야 합니다. 응답은 요소 크기, 글꼴 크기 조정, 웹 사이트 콘텐츠 변경 또는 모양 측면과 같이 다를 수 있습니다.
경우에 따라 창 크기 조정에 대한 응답으로 구성 요소를 다시 렌더링해야 할 수도 있습니다.
창 크기 조정 시 기능 구성요소 다시 렌더링
React 업데이트 버전 16.8부터 기능 구성 요소는 후크를 사용할 수 있습니다. resize 이벤트를 감지할 때마다 호출되는 사용자 지정 후크를 만들 수 있습니다.
사용자 지정 후크는 다음과 같이 표시됩니다.
import React, { useLayoutEffect, useState } from 'react';
function useWindowSize() {
const [windowSize, setWindowSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateWindowSize() {
setWindowSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateWindowSize);
updateWindowSize();
return () => window.removeEventListener('resize', updateWindowSize);
}, []);
return windowSize;
}
이 사용자 지정 후크를 사용하여 창 크기를 상태 값으로 저장할 수 있습니다. 따라서 상태 값은 창 크기가 변경될 때마다 업데이트되어 다시 렌더링을 트리거합니다.
useWindowSize 후크를 사용하는 가능한 방법을 살펴보겠습니다.
코드 예:
import "./styles.css";
import React, { useLayoutEffect, useState } from "react";
export default function App() {
const dimensions = useWindowSize();
console.log("re-rendered");
return (
<div className="App">
<h1>{"width: " + dimensions[0] + " height:" + dimensions[1]}</h1>
</div>
);
}
function useWindowSize() {
const [windowSize, setWindowSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateWindowSize() {
setWindowSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener("resize", updateWindowSize);
updateWindowSize();
return () => window.removeEventListener("resize", updateWindowSize);
}, []);
return windowSize;
}
여기에 바로 뒤에 정의된 useWindowSize() 후크가 있는 간단한 웹 앱이 있습니다. 이 후크는 두 항목이 있는 배열을 반환합니다. 첫 번째는 너비이고 두 번째는 높이입니다.
따라서 App 구성 요소에서 이 후크를 호출하면 그에 따라 이러한 값이 표시됩니다.
출력:
창 크기 조정 시 클래스 구성 요소 다시 렌더링
클래스 구성 요소에서 동일한 원칙을 사용할 수 있습니다. 창 높이와 너비를 상태 변수에 저장합니다. 그러나 이 경우 useEffect() 후크의 일부 코드를 componentDidMount() 및 componentDidUpdate() 수명 주기 후크 간에 분할해야 합니다.
컴포넌트가 마운트되면 이벤트 리스너를 추가하고 생성자에서 정의한 이벤트 핸들러를 호출하도록 지시합니다. 또한 구성 요소가 업데이트되거나 다시 렌더링될 때마다 handleResize()를 호출하도록 componentDidUpdate() 수명 주기 후크를 설정합니다.
class App extends Component {
constructor(props) {
super(props);
this.state = {
dimensions: []
}
this.handleResize = this.setState({dimensions: [window.innerWidth, window.innerHeight]})
}
componentDidMount() {
window.addEventListener("resize", handleResize());
}
componentDidUpdate() {
handleResize()
}
render() {
return (
<div>{"width: "+ {this.state.dimensions.width} + " " + "height: " + {this.state.dimensions.height}}</div>
);
}
}
기능적 구성 요소와 달리 여기에서는 상태를 업데이트하기 위해 setState() 메서드를 사용합니다. 이 메서드는 새 상태 개체라는 하나의 인수를 사용합니다. 후크는 React Class 구성 요소에서 지원되지 않습니다.
JSX에서는 클래스의 인스턴스를 나타내는 this 키워드를 통해 상태 변수를 참조합니다. 그렇지 않으면 모든 것이 기능적 구성 요소와 유사하게 작동합니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn