브라우저 크기 조정 시 React 뷰를 다시 렌더링하는 방법: jQuery와 React 중심 접근 방식?

React를 사용하여 브라우저 크기 조정 시 뷰 다시 렌더링

주어진 React 애플리케이션에서 목표는 다음과 같은 경우 뷰를 다시 렌더링하는 것입니다. 브라우저 창의 크기가 조정됩니다. 이를 통해 Pinterest와 같은 레이아웃에서 블록 위치 지정과 같은 UI 요소를 동적으로 조정할 수 있습니다.

창 크기 조정 라이브러리 사용:

한 가지 일반적인 접근 방식은 다음과 같습니다. 질문에서 제안한대로 jQuery의 창 크기 조정 이벤트를 사용하십시오. 다음 코드를 추가하면 창 크기가 조정될 때마다 구성 요소를 다시 렌더링할 수 있습니다.

$( window ).resize(function() {
  // Re-render the component
});

React 중심 접근 방식:

그러나 useEffect Hook을 사용하여 이를 달성하기 위한 더 많은 "반응" 접근 방식입니다. 이 후크를 사용하면 구성 요소에서 창 이벤트 수신과 같은 부작용을 수행할 수 있습니다. 창 크기 조정에 useEffect를 사용하려면 다음과 같이 사용자 정의 후크를 정의할 수 있습니다.

import React, { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

그런 다음 구성 요소에서 이 후크를 사용하여 창 크기에 액세스하고 변경될 때마다 다시 렌더링을 트리거할 수 있습니다.

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

이 접근 방식은 더욱 캡슐화되어 있으며 React의 수명 주기 패턴을 따르므로 구성 요소의 코드를 깔끔하고 유지 관리 가능하게 유지합니다.

위 내용은 브라우저 크기 조정 시 React 뷰를 다시 렌더링하는 방법: jQuery와 React 중심 접근 방식?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!