[Learning React] 9장 - Suspense

9.1 오류 경계

  - 오류 경계: 오류가 전체 앱을 망가뜨리지 못하게 막는 컴포넌트

    - 프로덕션 환경에서 발생 원인과 위치를 알아보기 쉬운 오류 메시지를 표시할 때 도움이 됨

    - 앱에서 발생할 가능성 있는 오류 추적 및 이슈 관리 시스템 등록 가능

    - 클래스 컴포넌트를 사용하여 오류 경계 컴포넌트 만들기 가능

      - 클래스 컴포넌트는 생명 주기에 따라 호출되는 구체적인 메서드 사용 가능

        - ex. getDerivedStateFromError()

    - 프로덕션 앱에서 사용자를 유지하기 위해 필수적임

9.2 코드 분리하기

  - 코드 분리: 코드 기반을 다루기 쉬운 덩어리로 나누고, 필요에 따라 불러오는 방식

    - React.lazy를 사용하면 렌더링이 이뤄지는 시점까지 컴포넌트 load 늦출 수 있음

  - 소개: Suspense 컴포넌트

    - Suspense로 트리상의 특정 컴포넌트를 감싸줌

    - lazy load가 발생하면 loading 메시지를 렌더링해 줌

  - Suspense를 데이터와 함께 사용하기

    - 에러가 발생하면 ErrorBoundary 컴포넌트 활용

    - 프라미스 발생하면 대기 중 상태가 촉발되므로 Suspense 컴포넌트 활용

  - 프라미스를 throw하기

    - 리액트는 문자열과 오류의 차이를 구분함

    - Suspense 컴포넌트는 프라미스가 throw 되었다는 것을 인지 가능

    - 프라미스를 던지면 Suspense 컴포넌트가 프라미스를 catch하고,

      프라미스가 완료될 때까지 pending 상태가 됨

  - Suspense가 가능한 데이터 소스 만들기

    - 프라미스만 있으면 됨

    - 프라미스를 인자로 받고 Suspense할 수 있는 데이터 소스 반환하는 함수 만들 수 있음

  - 파이버

    - 파이버; 리액즈 자체가 작동하는 방식을 내부적으로 개선하려는 reconciliation (조화) 알고리즘

      - DOM 갱신 작업을 좀 더 비동기적으로 수행

      - renderer와 reconciler 분리

        - renderer; 라이브러리에서 렌더링 담당

        - reconciler; 라이브러리에서 DOM 변경이 필요할 때 변경을 관리

      - work(DOM 갱신이 메인 스레드 블록하는 것)를 파이버라고 불리는 더 작은 단위로 나눔

      - 파이버; 자신이 reconcil시키는 대상이 무엇인지와 update cycle의 어떤 부분을 처리하고 있는지

        추적 가능한 JS 객체

      - 파이버는 update에 우선순위를 부여할 수 있는 인프라 제공

    - 변경이 일어나면 리액트는 컴포넌트 트리의 복사본을 JS 객체로 만듦

      - 트리에서 변경해야 할 부분을 찾아서 해당 부분만 변경함

      - 변경이 끝나면 복사본 (work-in-progress tree)이 기존 트리를 대신함

      - 이미 존재하는 트리를 사용해 작업을 수행하는 것이 중요!

---

[Source Code] 러닝 리액트 Ch09. Suspense