IT＆개발 정보 React 18에서 기대되는 점
페이지 정보
작성자 GrapeCity
작성일 2021-10-18 16:51 조회 3,013회
댓글 0건
본문
관련링크
React는 가장 인기 있는 오픈 소스 선언적 JavaScript 라이브러리 중 하나입니다. React의 속도, 확장성, 단순성 때문입니다. 최초 버전은 2011년에 발표되었으며 안정적인 최신 버전은 17이고, 버전 18이 곧 출시 예정입니다.
React 18에는 동시 렌더링 같은 새로운 기능이 포함되어 있습니다. React 18 계획에 설명된 대로 React 팀은 점진적인 채택을 위해 옵트인 메커니즘을 사용합니다.
동시성은 선택 사항이므로 컴포넌트 동작의 주요 변경 내용은 없습니다. 따라서 대규모 코드 변경이 필요 없어 업그레이드가 평소보다 훨씬 용이합니다. 실제로 아무것도 변경할 필요가 없을 수도 있습니다.
블로그 작성일(2021-09-07)을 기준으로, React 18 릴리스 타임라인은 다음과 같습니다.
알파 릴리스: 사용 가능(프로덕션 응용 프로그램에는 권장되지 않음)
퍼블릭 베타: 알파 릴리스부터 몇 개월 이후
RC(릴리스 후보): 베타 릴리스부터 몇 주 이후
일반 공급: RC 버전 릴리스부터 몇 주 이후
React는 주기적으로 @alpha 태그를 사용하여 알파 업데이트를 npm 패키지로 릴리스합니다. React 18 알파 버전을 사용해 보려면 다음 명령을 사용하여 설치할 수 있습니다.
React: npm install react@alpha
React-DOM: npm install react-dom@alpha
이제 React 18의 새로운 기능을 살펴보겠습니다.
새 루트 API
React 17에서는 React 루트를 만듭니다.
import React from 'react';
import ReactDOM from 'react-dom';
const container = document.getElementById('root')
ReactDOM.render(<App />, container);React 18부터는 해당 방법을 레거시 루트 API라고 합니다. React 18에서는 다음과 같은 새 루트 API를 소개합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App />)향상된 새 루트 API로 점진적으로 옵트인할 수 있도록 React 18에는 레거시 루트 API와 새 루트 API가 둘 다 포함되어 있습니다.
루트는 버전 18 이전에는 불투명했던 DOM 요소에 연결된 최상위 데이터 구조 포인터입니다. 레거시 루트 API에서는 루트 컴포넌트가 탑재된 후 렌더링할 render 콜백 함수를 다음과 같이 전달할 수 있었습니다.
//Pre version 17 code
const container = document.getElementById('root');
ReactDOM.render(<App />, container, function(){
console.log('render only after initial component rendering')
})
console.log('render at very last');버전 18에서는 먼저 createRoot 함수를 호출하고, 이 함수가 render 메서드를 호출합니다. 관리가 더 용이한 이 API는 새로운 기능을 활성화합니다. 새 API는 타이밍이 어렵다는 점에서 render 콜백 인수를 사용하지 않습니다. 대신, React 팀은 requestIdleCallback이나 네이티브 setTimeout을 사용하도록 제안합니다. 선택 사항인 부울 값을 루트 API에 직접 전달하여 hydrate 함수를 쉽게 사용할 수 있습니다.
// Pre-React 18
ReactDOM.hydrate(<App />, container);
// React 18 and onwards
const root = ReactDOM.createRoot(container, { hydrate: true });
root.render(<App />);React 개발자들은 자세히 알아보고 변경 내용을 토론할 수 있는 을 만들었습니다.
startTransition API
React는 동시에 렌더링되는 새 startTransition API를 소개합니다. 이 API는 현재 웹 페이지의 높은 응답성을 유지하고 비차단 방식의 방대한 UI(사용자 인터페이스) 업데이트를 가능하게 합니다. 사용자가 입력하여 검색할 수 있는 텍스트 상자로 예를 들어보겠습니다. 키를 입력할 때마다 UI가 다시 렌더링됩니다. startTransition API를 사용하여 응용 프로그램이 데이터를 가져오는 동안 UI의 높은 응답성을 유지합니다.
이 API는 빠른 업데이트와 지연 업데이트를 구분합니다. 즉, 업데이트를 전환합니다(한 UI 보기에서 다른 UI 보기로 전환).
일반적으로 startTransition API를 다음과 같이 사용합니다.
startTransition(() => {
setText(input);
});startTransition API는 동시성 컨트롤로 개발자를 지원합니다. React는 startTransition API에 래핑된 모든 컴포넌트 업데이트를 긴급하지 않은 것으로 표시하고 클릭이나 키 누름 같은 더 긴급한 업데이트가 발생할 경우 중단합니다. 이 API는 React에서 데이터 가져오기, 상태 업데이트 등의 긴급하지 않은 백그라운드 작업을 처리하는 동안 UI가 차단되지 않고 응답하도록 유지하는 데 도움이 됩니다.
검색을 위한 텍스트 입력 필드가 있는 컴포넌트를 고려해 보십시오. 사용자가 키를 누르는 순간 텍스트 필드를 업데이트하고 레코드를 검색해야 합니다. 상태를 제어하는 다음 두 가지 함수가 있습니다.
setInputValue - 입력 필드 업데이트
searchResults - 실제 검색 호출
버전 18 이전에는 React에서 두 함수를 동시에 여러 번 호출했습니다. 검색 호출 시간이 더 긴 경우 검색 작업이 완료될 때까지 키 입력 후에 UI가 항상 중단되었습니다.
검색 함수를 startTransition에 래핑한 React 18부터 검색 쿼리는 사용자가 값 입력을 중지할 때까지 연기됩니다. 입력 텍스트와 값이 즉시 업데이트되고, UI는 긴급하지 않은 검색 작업이 완료될 때까지 기다리지 않고 높은 응답성을 유지합니다. 컴포넌트를 startTransition에 래핑할 경우 다음 두 가지 주요 이점이 있습니다.
UI가 항상 높은 응답성을 유지합니다.
더 이상 관련 없는 입력을 위한 불필요한 데이터 중심 호출을 제거합니다.
일반적으로 useTransition API와 startTransition을 결합합니다. useTransition은 로딩 컴포넌트를 스피너로 교환하여 UI가 더 원활하게 작동하도록 합니다. 예를 들어, 검색 호출을 완료하고 렌더링하는 데 오랜 시간이 걸리는 경우 사용자에게 스피너가 표시되어 UI가 작동하고 있고 중단되지 않았음을 알립니다.
다음과 같이 startTransition을 사용합니다.
import { useTransition } from'react';
const [isPending, startTransition] = useTransition();
const callback = () => {
setInputValue(input);
startTransition(() => {
searchResults(input); });
}
{isPending && <Spinner />}에서 전환 API에 대해 자세히 설명합니다.
strict 효과가 있는 strict 모드
strict 효과 모드는 <StrictMode/>로 제공됩니다. 컴포넌트를 strict 효과로 래핑하면 React에서 탑재 및 정리 함수를 여러 개 실행해서 의도적으로 부작용을 두 번 실행하여 비정상적이고 안전하지 않은 동작을 감지합니다. 이 단계는 탑재 및 분리 주기 중에 빠른 새로 고침으로 복원력 성능이 뛰어난 컴포넌트와 올바른 동작을 보장합니다.
예정된 오프스크린 API는 컴포넌트를 분리하는 대신 숨겨 성능을 향상시킵니다. 이 단계는 React에서 상태를 유지 관리하고 탑재 및 분리 효과를 호출하게 합니다.
에서 strict 효과에 대해 자세히 설명합니다.
동시 렌더링
React 18에서는 동시 모드의 새로운 이름인 동시 렌더링을 소개합니다. 개발자가 동시 기능을 채택하고 점차 원활한 코드 재작성을 보장하는 데 필요하여 이름이 변경되었습니다.
SSR(서버 측 렌더링)
React 18에서는 첫 번째 로딩 화면 시간 향상을 포함하여 서버 측 렌더링의 아키텍처가 점검됩니다. 새 SSR 아키텍처는 다음 세 가지 중요한 문제를 해결합니다.
HTML을 보내기 전에 더 이상 서버에서 모든 데이터가 로드될 때까지 기다리지 않습니다. 응용 프로그램을 렌더링하기에 충분한 데이터가 있으면 즉시 HTML 렌더링을 시작한 후 준비가 될 때 나머지 HTML을 채우거나 스트리밍할 수 있습니다.
JavaScript 코드가 로드되기 전에도 하이드레이션을 시작할 수 있습니다. React는 HTML을 보존하고 관련 코드가 로드될 때 HTML을 하이드레이션합니다.
하이드레이션이 완료되지 않아도 사용자 인터페이스를 조작할 수 있습니다. 새 SSR은 더 원활한 UI 환경을 위해 선택적 하이드레이션을 사용하여 사용자가 조작하는 컴포넌트에 우선 순위를 지정합니다.
위에서 언급한 선택적 하이드레이션은 <Suspense/>를 사용하여 큰 React 컴포넌트를 작은 컴포넌트로 나눕니다.
예를 들어 페이지에 두세 개의 컴포넌트가 있다고 가정해 보겠습니다. 이전 버전에서는 한 부분의 하이드레이션이나 로드가 시작된 경우 나머지 UI가 차단됩니다.
새 SSR과 Suspense 컴포넌트에서는 특정 컴포넌트를 하이드레이션할 때 나머지 UI가 차단되지 않으므로 전반적으로 지터 없는 사용자 환경이 제공됩니다. 다음과 같이 Suspense를 사용합니다.
<Layout>
<Suspense fallback={<LoadingSpinner />}>
<TimeConsumingComponent />
<Suspense />
<Layout />React는 데이터를 가져올 수 있을 때까지 <TimeConsumingComponent /> 컴포넌트를 확인하지 않으며, 컴포넌트가 <LoadingSpinner />로 대체됩니다.
여러 컴포넌트가 데이터를 가져올 때 <Suspense />를 사용할 수 있습니다. 이렇게 하면 필수 요소의 대화형 성능이 유지됩니다. 에서 Suspense의 전체 변경 내용을 자세히 살펴볼 수 있습니다.
스트리밍 HTML
새 SSR을 사용하는 스트리밍 HTML의 경우 이전 renderToString 메서드 대신 새로운 pipeToNodeWritable 메서드를 사용해야 합니다.
pipeToNodeWritable API의 기본 구문은 다음과 같습니다.
pipeToNodeWritable(React.Node, Writable, Options): Controls
pipeToNodeWriteable API는 아직 작업 중이므로 사용할 수 없지만 다음 기능이 포함될 예정입니다.
병렬 데이터 가져오기를 위한 전체 기본 제공 <Suspense/> 지원
이미 렌더링된 컴포넌트가 다시 렌더링하는 동안 사라지지 않도록 하는 지연이 있는 코드 분할
지연 콘텐츠 블록이 나중에 렌더링되는 스트리밍 HTML
자세한 내용은 를 참조하십시오.
일시 중단 목록
일시 중단 목록은 화면에서 방대한 데이터 가져오기 컴포넌트의 숨김 및 숨김 해제를 준비하는 데 도움이 되는 또 다른 동시 렌더링 기능입니다. 컴포넌트를 <SuspenseList />로 래핑합니다. React는 값이 forward, backward 또는 together인 revealOrder 속성을 받습니다. 예를 들어 다음과 같습니다.
<SuspenseList revealOrder="forwards">
<Suspense fallback={<LoadingSpinner />}>
<SomeComponent id={1} />
</Suspense>
<Suspense fallback={<LoadingSpinner />}>
<SomeComponent id={2} />
</Suspense>
</SuspenseList>위 코드를 사용하면 "SomeComponent" 컴포넌트가 정방향으로 표시됩니다. 즉, 컴포넌트가 데이터를 가져올 때까지 LoadingSpinner로 대체됩니다. backward 옵션을 사용하면 컴포넌트가 역순으로 표시됩니다. together를 사용하면 모든 요소가 함께 표시됩니다.
useDeferredValue
useDeferredValue는 React 후크로, 상태 값과 밀리초 단위의 시간 제한을 받아서 해당 값의 “지연 버전”을 반환합니다. 이렇게 하면 값이 최대 timeoutMs만큼 지연됩니다. 구문은 다음과 같습니다.
const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });텍스트 입력이 있는 <BookLists />라는 컴포넌트를 고려해 보십시오. 시간 제한이 5초인 지연 값을 사용하므로 BookLists 컴포넌트가 5초 지연되어 렌더링되지만 텍스트 입력은 높은 응답성을 유지하고 현재 값으로 업데이트됩니다. 따라서 전반적인 사용자 환경에 지터가 없습니다.
코드:
function App() {
const [text, setText] = useState("");
const deferredText = useDeferredValue(text, { timeoutMs: 4000 });
return (
<div className="App">
<input value={text} onChange={handleChange} />
<BookLists text={deferredText} />
</div>
);
}자동 일괄 처리
React에서 내부적으로 일괄 처리하므로 개발자는 염려할 필요가 없습니다. 하지만 프레임워크나 언어의 내부 작업을 이해하는 것은 항상 바람직합니다. React는 함수 내의 변수를 변경하는 setStates를 모두 수집하여 함께 실행합니다. 이 단계를 일괄 처리라고 합니다. 일괄 처리는 UI 문제와 버그를 초래할 수 있는 불필요한 리렌더링과 미완성 상태를 방지하므로 성능 향상에 효과적입니다.
그러나 React 18 이전에는 React 일괄 처리에 일관성이 없었습니다. React는 키 누름이나 클릭 같은 브라우저 이벤트 중에만 일괄 처리를 수행했습니다. 하지만 일괄 처리는 이벤트가 지난 후, 즉 가져오기 콜백에서 발생했습니다.
새로운 루트 API에서는 React가 출처에 관계없이 모든 상태를 자동으로 일괄 처리합니다. 따라서 시간 제한 내에 모든 업데이트를 처리하고 React 이벤트와 동일한 방식을 약속합니다. 이 프로세스는 React에서 불필요한 렌더링을 잘라내어 성능을 향상시키는 데 도움이 됩니다.
아래 코드를 살펴보십시오.
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}React 18 이전에는 handleClick 함수가 함수 끝까지 일괄 처리를 수행하지 않았습니다. React 18부터 handleClick 함수 내의 모든 함수에서 일괄 처리가 발생합니다.
에서 자동 일괄 처리에 대해 자세히 설명합니다.
다음 단계
요약하면, React 18에서는 다음과 같은 주요 기능을 소개합니다.
새 루트 API
일시 중단, 일시 중단 목록, 선택적 하이드레이션이 포함된 새 SSR 아키텍처
자동 일괄 처리
새 전환 API를 사용하는 향상된 동시성 컨트롤
React 개발 팀은 React 18의 최신 개발에 참여하고 보조를 맞출 수 있도록 , , 을 제공합니다.
React 18로 업그레이드하거나 React 17을 계속 사용하는 경우 와 같은 기존 React 컴포넌트로 개발 시간을 절약할 수 있습니다.
이러한 도구를 사용하면 대시보드, 스프레드시트, 그리드 등의 기능이 다양한 대화형 UI 컴포넌트를 신속하게 만들 수 있습니다. 유연하고 스케일링 가능한 컴포넌트는 보안 규격을 준수하며 React 및 기타 프레임워크와 잘 통합됩니다. 최소한의 비용과 시간으로 응용 프로그램의 사용자 환경을 향상시켜 보세요!
지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
