• 리액트 18 버전 업의 핵심은 동시성 렌더링
  • 렌더링 중간에 일시 중지한 다음, 나중에 여유가 될 때 다시 시작하거나， 진행 중인 렌더링 작업을 포기하고 새로 다시 시작할 수도 있다

10.1 리액트 17 버전 살펴보기

• 리액트 17버전은 16버전과 다르게 새롭게 추가된 기능은 X
• 호환성이 깨지는 변경 사항, 즉 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화했다

10.1.1 리액트의 점진적인 업그레이드

• 점진적인 업그레이드
• 0.3.0부터 16버전으로 오기까지 semantic version 전략에 맞춰 업데이트되고 있었음
  • 새로운 주 버전이 릴리스되면 이전 버전에서의 API 제공을 완전히 중단해 버리고, 전체 애플리케이션을 새롭게 업그레이드하기를 요구
• 리액트 17 버전부터는 점진적인 업그레이드가 가능
  • 전체 애플리케이션 트리는 리액트 17이 지만 일부 트리와 컴포넌트에 대해서만 리액트 18을 선택하는 점진적인 버전 업이 가능해짐

10.1.2 이벤트 위임 방식의 변경

• 둘을 같게 동작함
  • <button ref={buttonRef}>그냥 버튼</button>
    • 해당 버튼의 이벤트 리스너에 click으로 추가
  • <button onClick={안녕하세요}>리액트 버튼</button>
    • noop이라는 핸들러가 추가돼 있음. 문자 그대로(no operation) 아무런 일도 하지 않음
• 리액트에서는 이벤트를 어떻게 처리할까?
  • 리액트는 이벤트 핸들러를 해당 이벤트 핸들러를 추가한 각각의 DOM 요소에 부탁하는 것이 아니라, 이벤트 타입(click, change)당 하나의 핸들러를 루트에 부착함. 이를 이벤트 위임이라함
• 리액트는 최초 릴리스부터 이벤트 위임을 적극적으로 사용했음
  • 리액트는 이벤트 핸들러를 각 요소가 아닌 document에 연결해서 이벤트를 좀 더 효율적으로 관리함
    • ex. 루트가 div#\_\_next이고, 해당 엘리먼트에 이벤트가 달려 있음
    • 16 버전까지는 모두 document에서 수행되고 있었음
    • 17 버전부터는 이벤트 위임이 모두 document가 아닌 리액트 컴포넌트 최상단 트리, 즉 루트 요소로 바뀜
      • 이유
        • 점진적인 업그레이드 지원 / 다른 바닐라 자바스크립트 코드 또는 jQuery 등이 혼재돼 있는 경우 혼란을 방지하기 위해서임

10.1.3 import React from 'react'가 더 이상 필요 없다: 새로운 JSX transform

• 17부터는 바벨과 협력해 이러한 import 구문 없이도 JSX를 변환할 수 있게 됨

구 버전 vs 17 버전

const Component = (
  <div>
    <span>hello world</span>
  </div>
);

• 구 버전

  var Component = React.createElement(
    "div",
    null,
    React.createElement("span", null, "hello world")
  );