[모던 리액트 딥다이브] 10장 리액트 17 vs 리액트 18

 

 

리액트 17

• 점진적인 업그레이드를 지원하기 위한 리액트의 일부 컴포넌트를 다른 버전으로 변경 가능
• 이벤트 위임 방식의 변경
  • 기존 16에서는 이벤트 위임이 모두 document에서 수행 => 이미 모든 이벤트가 document에 있으므로 e.stopPropatation() 실행이 무색함
  • 17부터는 리액트 컴포넌트 최상단 트리인 루트 요소로 바뀜
• import 구문 없이도 JSX 변환 가능
  • import React가 필요 없고, 불필요한 import문을 삭제해 번들링 크기를 약간 줄일 수 있음
• 이벤트 풀링 제거
  • 이벤트 풀링 : SyntheticEvent 풀을 만들어서 이벤트가 발생할 때마다 가져오는 것
  • 이벤트 핸들러 내부에서 이벤트 객체에 접근할 때 비동기든 동기든 상관없이 일관적으로 코딩할 수 있음
• useEffect 클린업 함수의 비동기 실행
  • 클린업 함수가 동기로 실행되기 때문에 완료되기 전까지 다른 작업을 방해하므로 불필요한 성능 저하로 이어짐
  • 17부터 클린업 함수가 비동기적으로 실행 => 컴포넌트의 커밋 단계가 완료될 때까지 지연됨
• 컴포넌트의 undefined 반환에 대한 일관적인 에러 처리

 

 

리액트 18

• 새로운 훅 추가
  • useId
    • 컴포넌트별로 유니크한 값을 생성하는 훅
    • 공통으로 사용하는 컴포넌트여도 서로 인스턴스가 다르면 다른 랜덤한 값을 만들어 냄
  • useTransition
    • UI 변경을 가로막지 않고 상태를 업데이트할 수 있는 리액트 훅
    • 상태 업데이트를 긴급하지 않은 것으로 간주해 무거운 렌더링 작업을 조금 미룰 수 있음
    • 아무것도 인수로 받지 않고 isPending, startTransition이 담긴 배열을 반환함
    • isPending : 상태 업데이트가 진행 중인지를 확인하는 boolean
    • startTransition : 긴급하지 않은 상태 업데이트로 간주할 set 함수를 넣어둘 수 있는 함수를 인수로 받음
    • '동시성'을 다룰 수 있는 새로운 훅
    • 느린 렌더링 과정에서 로딩 화면을 보여주거나 혹은 지금 진행 중인 렌더링을 버리고 새로운 상태값으로 다시 렌더링하는 등의 작업을 할 수 있음
    • 주의할 점
      • startTransition 내부는 반드시 setState와 같은 상태를 업데이트하는 함수와 관련된 작업만 넘길 수 있음
      • startTransition으로 넘겨주는 상태 업데이트는 다른 모든 동기 업데이트로 인해 실행이 지연될 수 있음
      • startTransition으로 넘겨주는 함수는 반드시 동기 함수여야 함
  • useDeferredValue
    • 리액트 컴포넌트 트리에서 리렌더링이 급하지 않은 부분을 지연할 수 있게 도와주는 훅
    • 디바운스와 비슷하지만 고정된 지연 시간 없이 첫 번째 렌더링이 완료된 이후에 useDeferredValue로 지연된 렌더링을 수행함
    • 지연된 렌더링은 중단할 수 있고, 사용자의 인터렉션을 차단하지도 않음
  • useSyncExternalStore
    • useSubscription의 대체 훅
    • 리액트 외부 데이터 소스에 리액트에서 추구하는 동시성 처리가 추가돼 있지 않다면 테어링 현상이 발생할 수 있고, 이를 해결하기 위한 훅
    • 첫 번째 인수는 subscribe로 콜백 함수를 받아 스토어에 등록하는 용도로 사용
    • 두 번째 인수는 컴포넌트에 필요한 현재 스토어의 데이터를 반환하는 함수
    • 마지막 인수는 옵셔널 값으로, 서버 사이드 렌더링 시에 내부 리액트를 하이드레이션하는 도중에만 사용됨
    • 외부 데이터 값의 변경 여부를 확인해 리렌더링을 발생시킬 수 있음
  • useInsertionEffect
    • CSS-in-js 라이브러리를 위한 훅
    • DOM이 실제로 변경되기 전에 동기적으로 실행됨
    • useLayoutEffect가 모든 DOM의 변경 작업이 다 끝난 이후에 실행되었다면 useInsertionEffect는 이러한 DOM 변경 작업 이전에 실행됨
• react-dom/client
  • createRoot : render 메서드를 대체할 새로운 메서드
  • hydrateRoot : 서버 사이드 렌더링 애플리케이션에서 하이드레이션을 하기 위한 새로운 메서드
• react-dom/sercer
  • renderToPipeableStream
    • 리액트 컴포넌트를 HTML로 렌더링하는 메서드
    • 스트림을 지원하는 메서드
    • HTML을 점진적으로 렌더링하고 클라이언트에서는 중간에 script를 삽입하는 등의 작업을 할 수 있음
    • 서버에서는 Suspense를 사용해 빠르게 렌더링이 필요한 부분을 먼저 렌더링할 수 있고, 값비싼 연산으로 구성된 부분은 이후에 렌더링되게끔 할 수 있음
    • 순서나 오래 걸리는 렌더링에 영향받을 필요 없이 빠르게 렌더링 수행 가능
  • renderToReadableStream
    • renderToPipeableStream이 Node.js 환경에서의 렌더링을 위해 사용된다면 renderToReadableStram은 웹 스트림을 기반으로 작동
• 자동 배치
  • 리액트가 여러 상태 업데이트를 하나의 리렌더링으로 묶어서 성능을 향상시키는 방법
• 더욱 엄격해진 엄격 모드
  • 엄격모드 : 리액트 애플리케이션에서 발생할 수도 있는 잠재적인 버그를 찾는 데 도움이 되는 컴포넌트
  • 더 이상 안전하지 않은 특정 생명주기를 사용하는 컴포넌트에 대한 경고 로그가 기록됨
  • 문자열 ref 사용 금지
  • findDOMNode에 대한 경고 출력
  • 구 Context API 사용 시 발생하는 경고
  • 예상치 못한 부작용 검사
• Suspense 기능 강화
  • Suspense : 컴포넌트를 동적으로 가져올 수 있게 도와주는 기능
  • 애플리케이션에서 상대적으로 중요하지 않은 컴포넌트를 분할해 초기 렌더링 속도를 향상시키는 데 많은 도움을 줌
  • Suspense로 인해 컴포넌트가 보이거나 사라질 때도 effect가 정상적으로 실행됨
  • Suspense를 서버에서도 실행 가능
  • Suspense 내에 스로톨링 추가됨

엄격 모드에서 두 번씩 실행되는 이유 :
리액트의 컴포넌트에서 항상 순수한 결과물을 내고 있는지 개발자에게 확인시켜 주기 위함
리액트에서는 state, props, context가 변경되지 않으면 항상 동일한 JSX를 반환해야 하고, 이러한 규칙을 위배하는 컴포넌트는 잠재적으로 버그가 존재할 수 있다고 판단함. 따라서 엄격 모드에서는 순수해야 하는 함수, 메서드 등을 두 번 실행해 이러한 내용을 사전에 개발자가 파악할 수 있도록 유도하는 것

 

 

동시성 렌더링

• 리액트 18 버전의 핵심
• 과거 렌더링 과정은 중간에 일시 중지를 하거나 렌더링 도중에 해당 렌더링 결과물을 포기해야한다는 매커니즘이 없었음
• 하지만 리액트 18의 렌더링은 중간에 일시 중지한 다음, 나중에 여유가 있을 때 다시 시작하거나, 진행 중인 렌더링 작업을 포기하고 새로 다시 시작할 수 있음
• 이 과정에서 UI가 일관되게 표시할 수 있도록 보장함