React v16.0에서 추가된 기능을 살펴보고 정리해보자
변화점들 사이에서는 몇 가지 오랬동안 요청되었던 사항들이 포함되어 있습니다
render() {
// 리스트 아이템을 추가적인 요소로 감쌀 필요가 없다!
// () 등의 Fragment로 감싸지 않아도 되는듯 하다
return [
// 키를 잊지 마세요 :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
]
}
React v16.2.0에서는, Key를 요구하지 않는 특별한 Framgent 문법이 추가 되었습니다 => v16.2.0에서 살펴 봅시다
우리는 문자열을 리턴하는 것도 추가 했습니다
오직 문자열만 리턴하면 어떤 요소로 감싸지는가?
render() {
return 'Look ma, no spans!';
}
이전에는, 렌더링 중에 일어나는 런타임 오류는 깨진(Broken) 상태를 React에 넣고, 숨은 에러메시지를 만들고 복구 하기 위해서 페이지를 새로고침 해야했습니다
이러한 문제를 다루기 위하여, 리액트 16은 탄력있는 오류 처리 전략을 사용합니다
기본적으로 컴포넌트 안의 렌더 또는 라이프 사이클 메서드에서 오류가 던져졌다면, 전체 컴포넌트 트리는 루트로부터 언마운트 됩니다
이것은 오류가 있는 데이터를 보여주는 것을 막습니다
하지만, 아마도 이상적인 유저 경험은 아닐 것입니다
에러가 있을 때마다 루트에서 언마운트 되는 대신, 에러 바운더리를 사용할 수 있습니다
에러 바운더리는 서브트리 내에서 오류를 잡아내고 그 곳에서 fallback UI를 보여주는 특별한 컴포넌트 입니다
에러 바운더리를 try-catch 구문으로 생각해보세요, 하지만 React 컴포넌트는 아니지만요
자세한 내용은 React 16 에서 에러 다루기 글에서 다룹니다
에러 바운더리 내용은 새로운 article로 구분해서 작성할게요~
render() {
// React 는 새로운 div를 생성하지 않습니다
// 그것은 'domNode'의 자식으로 렌더 합니다
// 'domNode'는 어떠한 유효한 DOM 노드 일 수 있습니다
// DOM의 상하관계에 구분없이 말이죠
return ReactDOM.createPortal(
this.props.children,
domNode,
);
}
React 16에서는 서버 렌더링이 완전히 새로 작성되었습니다
그 것은 진짜 빠릅니다
그 것은 스트림을 제공합니다, 따라서 바이트를 클리이언트에 빠르게 보낼 수 있습니다
또한 새로운 Packaging 전략 덕분에 process.env를 확인하고 컴파일하는 것 (믿거나 말거나, Node에서 process.env를 읽는 것은 매우 느립니다!), 더이상 좋은 서버 사이드 렌더링 성능을 위해 React를 번들로 묶을 필요가 없습니다!
핵심 멤버인 Sasha Aickin은 React 16의 SSR 개선 사항을 설명하는 훌륭한 기사를 작성했습니다.
Sasha의 합성 벤치마크 (synthetic benchmark)에 따르면, React 15에 비해 대략 3배 가량 빠르다고 합니다
porcess.env를 컴파일 하는 것은 Node 4의 2.4배, Node 6의 3배, Node 8.4의 3.8배 성능 향상이 있습니다
그리고 컴파일 하지 않은 React 15와 비교하면 React 16은 최신 버전의 Node의 SSR에서 엄청난 성능 향상을 얻었습니다
하지만 실제 성능을 대변하지는 않습니다, Synthetic Benchmark임을 감안해주세요
게다가, React 16은 일단 클라이언트에 도달하면 서버 렌더링된 HTML을 hydrating 하는데 더 좋습니다
더 이상 서버의 결과와 정확히 일치하기 위해 초기 렌더링이 필요하지 않습니다
대신 가능한 한 많은 기존 DOM을 재사용하려고 시도합니다
더 이상 checksum은 없습니다!
일반적으로 클라이언트와 서버에서 서로 다른 컨텐츠를 렌더링하는 것은 권장하지 ㅇ낳지만 일부 경우에 유용할 수 있습니다 (예: 타임스탬프)
그러나 서버에 누락된 노드가 있으면 잘못된 속성으로 형제 노드가 생성될 수 있으므로 위험합니다
이러한 모든 추가 사항에도 부룩하고 React 16은 실제로 15.6.1에 비해 작습니다!!
react 20.7k에서 5.3kb로 줄었습니다
react-dom 141kb에서 103.7kb로 줄었습니다
react + react-dom은 161.7kb에서 109kb로 줄었습니다
이는 이전 버전과 비교하어 총 32%의 용량이 줄었습니다
크기 차이는 대부분 packaging 전략에 기인합니다
React는 이제 Rollup을 사용하여 각기 다른 대상 형식에 대한 플랫 번들을 생성하여 크기와 런타임 성능에서 모두 향상되었습니다
플랫 번들 형식은 또한 Webpack, Browserify, 사전 빌드된 UMD 번들 또는 기타 시스템과 함께 앱을 전달 하는 방법에 관계 없이 번들 크기에 대한 React의 영향이 거의 일관적임을 의미합니다
React 15은 코드명 "Fiber"의 새로운 핵심 아키텍처를 기반으로 구축된 React의 첫 번째 버전입니다
Fiber는 Error Boundary 및 Fragments와 같은 React 16의 새로운 기능 대부분을 담당합니다
다음 몇 가지 릴리즈에서 React의 잠재력을 최대한 발휘하기 시작하면서 더 많은 새로운 기능을 기대할 수 있습니다
아마도 우리가 작업하고 있는 가장 흥미로운 영역은 브라우저에게 주기적으로 실행을 제공하여 렌더링 작업을 협력적으로 예약하는 전략인 비동기렌더링일 것입니다
결과는 비동기 렌더링을 사용하면 React가 메인 스레드를 차단하지 않기 때문에 앱이 더 반응적이게 됩니다
우리는 비동기 렌더링이 큰 일이며 React의 미래를 대표한다고 생각합니다
v16.0으로의 마이그레이션을 최대한 원활하게 하기 위해 아직 비동기 기능을 활성화하지 않고 있지만 앞으로 몇 달 안에 이 기능을 출시하게 되어 기쁩니다
계속 지켜봐 주세요!
React 16은 Map 및 Set 컬렉션에 의존합니다
아직 기본적으로 제공하지 않는 이전 브라우저 및 기기를 지원하는 경우에는 core-js 또는 babel-polyfill과 같은 번들 애플리케이션에 전역 폴리필을 포함하는 것을 고려해보세요
이전 브라우저를 지원하기 위해 core-js를 사용하는 React 16용 폴리필 환경은 다음과 같습니다
import 'core-js/es6/map';
import 'core-js/es6/set';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
import 'raf/polyfill';