> 웹 프론트엔드 > JS 튜토리얼 > 브라우저 크기 조정 시 React 뷰를 다시 렌더링하는 방법: jQuery와 React 중심 접근 방식?

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

Mary-Kate Olsen
풀어 주다: 2024-10-19 19:37:01
원래의
846명이 탐색했습니다.

How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿