React의 새로운 기능 살펴보기 무엇이 바뀌었고 왜 중요한가요?

React 18은 성능, 개발자 경험 및 유용성을 향상시키는 다양한 새로운 기능과 개선 사항을 제공합니다. 동시 렌더링, 자동 배치 및 기타 혁신에 중점을 둔 React 18은 개발자에게 현대적이고 확장 가능한 웹 애플리케이션을 구축할 수 있는 강력한 도구를 제공합니다. 이 글에서는 React 18의 주요 기능, 그것이 중요한 이유, 그리고 프로젝트를 개선할 수 있는 방법을 살펴보겠습니다.

1. 동시 렌더링
React 18의 가장 중요한 변화 중 하나는 동시 렌더링의 도입입니다. 이 기능을 사용하면 React가 여러 작업을 동시에 수행하여 애플리케이션의 반응성을 높이고 UI 차단을 줄일 수 있습니다.

중요한 이유:

• 긴급성을 기준으로 작업의 우선순위를 지정하여 사용자 경험을 개선합니다.
• 데이터 가져오기를 위한 Suspense와 같은 기능이 원활하게 작동하도록 합니다.
• 애플리케이션이 더 빠르고 유연하게 느껴집니다.

예:
동시 렌더링은 새로운 startTransition API를 지원합니다:

import { useState, startTransition } from 'react';  

function App() {
    const [count, setCount] = useState(0);  

    const handleClick = () => {
        startTransition(() => {
            setCount((prev) => prev + 1);  
        });
    };  

    return <button onClick={handleClick}>Count: {count}</button>;  
}

startTransition API는 상태 업데이트가 긴급 UI 업데이트를 차단하지 않도록 보장합니다.

2. 자동배칭
React 18은 비동기 경계를 넘어서도 상태 업데이트의 자동 일괄 처리를 도입합니다. 즉, 여러 상태 업데이트가 단일 재렌더링으로 그룹화되어 성능이 향상됩니다.

중요한 이유:

• 불필요한 렌더링을 줄여 애플리케이션 속도를 높입니다.
• 수동 일괄 처리를 제거하여 코드를 단순화합니다.

예:

import { useState } from 'react';  

function App() {
    const [state1, setState1] = useState(0);  
    const [state2, setState2] = useState(0);  

    const handleClick = () => {
        setState1((prev) => prev + 1);  
        setState2((prev) => prev + 1);  
        // Both updates are batched into a single render
    };  

    return <button onClick={handleClick}>Update States</button>;  
}

3. 데이터 가져오기 중단
React 18은 Suspense API를 강화하여 데이터 가져오기와 같은 비동기 작업을 지원합니다. 이를 통해 애플리케이션의 로드 상태 및 오류 처리가 단순화됩니다.

중요한 이유:

• 구성요소 로딩 상태를 더 깔끔하고 선언적으로 만듭니다.
• Relay 및 React Query와 같은 라이브러리와 더 나은 통합이 가능합니다. 예:

import { Suspense } from 'react';  

function DataComponent() {
    // Fetch data and render content
}

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <DataComponent />  
        </Suspense>
    );  
}

4. 전환 API
새로운 Transition API는 페이지 간 탐색이나 탭 전환 등 긴급하지 않은 UI 업데이트에 대한 전환을 관리하는 데 도움이 됩니다.

중요한 이유:

• 긴급 업데이트와 긴급하지 않은 업데이트를 분리하여 성능을 향상시킵니다.
• 애플리케이션의 인지 속도를 향상시킵니다.

5. 향상된 서버측 렌더링(SSR)
React 18에는 스트리밍 서버 렌더링 및 선택적 수화와 같은 기능이 도입되어 SSR을 더욱 효율적으로 만듭니다.

중요한 이유:

• 대규모 애플리케이션의 초기 렌더링 속도가 빨라집니다.
• UI의 특정 부분에 대한 하이드레이션을 연기하여 JavaScript 번들 크기를 줄입니다.

6. 새로운 후크 및 API
React 18에는 개발을 단순화하기 위한 몇 가지 새로운 후크와 API가 포함되어 있습니다.

• useId: 서버 및 클라이언트 렌더링을 위한 고유 ID를 생성합니다.
• useDeferredValue: 긴급하지 않은 업데이트의 렌더링을 연기합니다.
• useTransition: 전환에 대해 보류 중인 업데이트를 추적합니다.

예:

import { useState, startTransition } from 'react';  

function App() {
    const [count, setCount] = useState(0);  

    const handleClick = () => {
        startTransition(() => {
            setCount((prev) => prev + 1);  
        });
    };  

    return <button onClick={handleClick}>Count: {count}</button>;  
}

1. ReactDOM.render 메소드를 ReactDOM.createRoot로 업데이트하세요.

import { useState } from 'react';  

function App() {
    const [state1, setState1] = useState(0);  
    const [state2, setState2] = useState(0);  

    const handleClick = () => {
        setState1((prev) => prev + 1);  
        setState2((prev) => prev + 1);  
        // Both updates are batched into a single render
    };  

    return <button onClick={handleClick}>Update States</button>;  
}

결론
React 18은 웹 개발에서 중요한 도약을 이루었으며 개발자에게 성능이 뛰어나고 사용자 친화적인 애플리케이션을 구축할 수 있는 더 많은 도구를 제공합니다. 동시 렌더링, 자동 일괄 처리, 향상된 SSR과 같은 기능을 갖춘 React 18은 최신 웹 개발 요구 사항을 쉽게 처리할 수 있도록 지원합니다.

지금부터 React 18을 살펴보고 개발 기술을 한 단계 끌어올리세요! ?

위 내용은 React의 새로운 기능 살펴보기 무엇이 바뀌었고 왜 중요한가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!