React 17은 기본 사항을 개선하는 데 중점을 두었지만 React 18에 추가 된 중요한 사항은 거의 없습니다.이 기사에서는 React 18 alpha의 멋진 새 기능을 시작하는 방법에 대한 최신 업데이트를 살펴볼 것입니다.

React 18 alpha 설치 : npm install react@alpha react-dom@alpha

다음은 몇 가지 업데이트 목록입니다.

1. 새로운 루트 API
2. 미결
3. SuspenseList
4. useDeferredValue
5. 자동 배치

React 18에는 새로운 Root API가 있습니다.

reactDOM.render 메서드의 앞부분에서 App 구성 요소를 전달한 다음 document.getElementById 및 루트 요소를 전달하는 데 사용했습니다. 그래서 앱 컴포넌트를 페이지의 루트 요소로 렌더링했습니다.

import ReactDOM from "react-dom";
import App from "App";
ReactDOM.render(<App />, document.getElementById("root"));

import ReactDOM from "react-dom";
import App from "App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

미결

이름과 마찬가지로 Suspense는 렌더링 할 준비가 될 때까지 무언가를 일시 중단합니다.

이전 버전의 반응에서 아래 코드는 ReadyComponent가 즉시 마운트되고 해당 효과가 호출되도록합니다.

<Suspense fallback={<Loading />}>
    <ComponentWaitingForData />
    <ReadyComponent />
</Suspense>

위의 코드를 참조하면 이제 ReadyComponent를 마운트하지 않고 대신 ComponentWaitingForData가 먼저 해결되기를 기다립니다.

SuspenseList

두 개의 소품을 제외한 SuspenseList. 'revealOrder'및 'tail'.

'revealOrder'는 SuspenseList 구성 옵션 중 하나입니다. 함께, 앞으로 및 뒤로 정의되지 않을 수 있습니다.

• 정의되지 않음 (기본값) : 멜빵이 해결 될 때 어린이를 표시합니다.
• together : 모든 멜빵이 해결되면 아이들을 함께 드러냅니다.
• forwards : 아이들을 위에서 아래로, 서스펜더에 무관심하게 렌더링합니다. 해결 순서
• 거꾸로 : 서스펜더 해결 순서에 무관하게 아래에서 위로 자식 렌더링

<SuspenseList revealOrder="forwards" >
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

<SuspenseList revealOrder="forwards" tail="collapsed">
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

useDeferredValue

'useDeferredValue'는 전달 된 값의 지연된 버전을 반환하는 후크입니다. 상태 값과 시간 초과 (밀리 초)를받습니다. 대부분의 시간 초과에 대해 "지연"할 수있는 지연된 버전의 값을 반환합니다.

import { useDeferredValue } from "react";
const [text, setText] = useState("react js");
const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

자동 배치

자동 일괄 처리가 크게 개선되었습니다. 이전 버전의 React에서는 불필요한 다시 렌더링을 줄이기 위해 여러 상태 업데이트를 하나로 일괄 처리하는 데 사용합니다. 문제는 약속, 시간 초과 또는 기타 핸들러가 아닌 DOM 이벤트 핸들러에서만 수행되었다는 것입니다.

이전 버전의 React에서 어떻게 일괄 처리가 발생하는지 아래 코드를 살펴 보겠습니다.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);
    
    const handleClick = () => {
        setCount(count + 1); //No re-render
        setColor(count % 2 === 0 ? "Green" : "Red"); //No re-render
        // Now re-renders once at the end (this is batching)
    }
return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

일괄 처리가 발생하는 아래 코드를 살펴 보겠습니다. 아래 코드에서 일괄 처리는 React 18에서 잘 작동하지만 이전 버전의 React는 일괄 처리하지 않습니다.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);    const handleClick = () => {
        Promise.resolve().then(() => {
            setCount(count + 1); //Re-render
            setColor(count % 2 === 0 ? "Green" : "Red"); //Re-render
        });
    }    return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

참조 — https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

마무리 생각 :

React 18 알파 버전의 멋진 업데이트에 대해 방금 알게되었습니다. JavaScript 개발자 인 저는 업데이트가 정말 마음에 들었고 React 18의 베타 릴리스가 어떻게 생겼는지 보게되어 기쁩니다.

끝까지와 주셔서 감사합니다 🙌. 이 기사를 즐겼거나 새로운 것을 배웠다면 아래의 공유 버튼을 클릭하여 더 많은 사람들에게 다가 가거나 Twitter 에서 팔로우 하여 다른 팁, 기사 및 내가 배우고 공유하는 내용을 볼 수 있도록 지원해주세요 .