DIL: 모던 리액트 딥 다이브, 6주차-6

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week6-6_2024-04-13

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | --------------------------------------------------------- | ----------- | | 6주차 | 10장, 11장 | 리액트 17과 18 변경 사항 살펴보기, Next.js 13과 리액트 18 | p~ |

오늘 읽은 내용을 markdown으로 간단히 메모

---

React 18

react-dom/client

• 클라이언트에서 리액트 트리를 만들 때 사용하는 API 변경점
  • index.{t|j}sx 내용 변경

createRoot

• render => createRoot + render

const root = ReactDOM.createRoot(container);
root.render(<App />);

hydrateRoot

• 서버 사이드 랜더링 애플리케이션에서 하이드레이션을 하기 위한 메서드
  • 프레임워크에 의존하고 있을 것이므로 수정할 일이 거의 없다.

// before
import ReactDOM from "react-dom";
import App from "App";

const container = document.getElementById("root");

ReactDOM.hydrate(<App />, container);

// 18
const root = ReactDOM.hydrateRoot(container, <App />);

onRecoverableError

• createRoot, hydrateRoot의 옵션
  • 과정에서 에러가 발생했을 때 발생하는 콜백 함수 => reportError, console.error 또는 원하는 내용 추가

react-dom/server

renderToPipeableStream

• 리액트 컴포넌트를 HTML로 랜더링하는 메서드, 스트림을 지원
• HTML을 점진적으로 랜더링, 클라이언트는 중간에 script를 삽입하는 등의 작업을 할 수 있음
  • 서버에서 Suspence를 사용해, 빠르게 랜더링 필요한 부분 랜더링(비싼 연산 나중에)
• 첫 번째 로딩을 빠르게 수행하기
  • hydrateRoot를 호출해 서버에서는 HTML 랜더링 + 클라이언트의 리액트에는 이벤트만 추가
  • 기존 renderToNodeStream 문제점 -> 무조건 순서대로, 순서에 의존적 / 블락킹, 병목
• 와 같은 코드 분할, 지연 랜더링을 서버사이드에서 사용
• 실제로 프레임워크가 아니라 renderToPipableStream으로 서버사이드 랜더링을 만드는 경우 거의 없지만 -> 사용하는 프레임워크에서 리액트 18을 사용하고 싶다면? 메서드 지원 여부 확인 필요

renderToReadableStream

• 웹 스트림을 사용하는 모던 엣지 런타임 환경에서 사용하는 메서드 (일반적으로는 사용 x)
  • renderToPipeableStream: Node.js
  • renderToReadableStream: web stream

자동 배치 Automatic Batching

• 리액트가 여러 상태를 하나의 리랜더링으로 묶어서 성능을 향상시키는 방법
  • 사용자 액션이 한 번에 두 개 이상의 state을 동시에 업데이트 한다? -> 하나의 리랜더링으로 묶어서 수행
• Promise, setTimeout과 같은 비동기 이벤트
  • 17의 경우? 두 번 리랜더링, 18에서는 자동 배치로 한 번 리랜더링(모든 업데이트가 배치 작업으로 최적화되도록 바뀜)
  • 그 외의 이벤트는 동일하게 1번
• 자동 배치를 안할 경우 > flushSync를 사용하면 된다.

문자열 ref 사용 금지

<input type="text" ref="myInput" />; // 문자열을 ref로 사용함
console.log(this.refs.myInput); // deprecated

• 문제점
  • 여러 컴포넌트에 걸쳐 사용될 수 있으므로 충돌의 여지 있음
  • 단순 만자열로 존재하기 때문에, 어떤 ref에서 참조되고 있는 지 파악하기 어려움
  • 리액트가 계속해서 현재 랜더링되고 있는 컴포넌트의 ref 값을 추적하기 때문에 성능 이슈가 있음

findDOMNode에 대한 경고

• 클래스 컴포넌트 인스턴스에서 실제 DOM 요소에 대한 참조를 가져올 수 있는 지금은 권장되지 않는 메서드
  • 부모가 특정 자식만 별도로 랜더링하는 것이 가능하다. 리액트가 추구하는 트리 추상화 구조와 맞지 않음

구 Context API 사용 시 경고

• (엄격 모드) childContextType, getChildContext 사용 시 경고

예상치 못한 side-effects 검사

• (엄격 모드) 다음을 이중 호출
  • 클래스 컴포넌트의 constructor.render, shoudComponentUpdate.getDerivedStateFromProps
  • 클래스 컴포넌트의 setState의 첫 번째 인수
  • 함수 컴포넌트의 body
  • useState, useMemo, useReducer에 전달되는 함수
• 왜?
  • 함수형 프로그래밍 원칙에 따라 모든 컴포넌트는 항상 순수하다.
    • 정말 순수한 결과물을 내고 있는지 개발자에게 확인 시켜주기 위해 두 번 실행한다.
  • 입력 값이 변경되지 않으면, 항상 같은 결과물을 반환한다.
    • 즉, state, props, context가 변경되지 않으면? 항상 동일한 JSX를 반환해야 한다.
• console
  • 17에서는 두 번 log 안함
  • 18에서는 두 번째는 글자색상 회색

엄격 모드 추가요

• https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-strict-mode

  In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

• 향후 리액트에서, 컴포넌트가 마운트 해제된 상태에서 내부의 상태값을 유지하는 기능을 제공할 예정 <- 이거 큰 일임
  • ex) 뒤로 가기 후 돌아왔을 때 이전 상태 유지
• 컴포넌트가 처음 마운트될 때마다, 모든 컴포넌트를 자동으로 마운트 해제 및 재마운트해, 두 번째 마운트 이전 상태로 복원한다.

  * React mounts the component.
    * Layout effects are created.
    * Effect effects are created.
  * React simulates unmounting the component.
    * Layout effects are destroyed.
    * Effects are destroyed.
  * React simulates mounting the component with the previous state.
    * Layout effect setup code runs
    * Effect setup code runs
  

Suspense 기능 강화

• Suspense는? 16.6에서 실험 버전으로 도입 / 컴포넌트 동적으로 가져올 수 있게 도와주는 기능
  • lazy와 Suspense는 한 쌍으로 사용됐고, 애플리케이션에서 상대적으로 중요하지 않은 컴포넌트 분할 => 초기 렌더링 속도를 향상시킴

const DynamicSampleComponent = lazy(() => import("./SampleComponent"));

export default function App() {
  return (
    <Suspense fallback={<>...loading</>}>
      <DynamicSampleComponent />
    </Suspense>
  );
}

• Next.js에서 Suspense를 사용할 때, 지연 중인 컴포넌트를 랜더링 할 수 없기 때문에 useEffect를 활용한 커스텀 훅 등을 만들어서 클라이언트에서만 작동하도록 처리했었다.
• 리액트 18
  • 마운트 되기 직전에 effect가 빠르게 실행되는 문제 수정됨. => 컴포넌트가 실제로 화면에 노출될 때 effect가 실행된다
  • Supense로 인해 컴포넌트가 보이거나 사라질 때도 effect가 정상적으로 실행. 이전에는 컴포넌트 스스로가 Suspense에 의해 현재 보여지고 있는지 숨겨져 있는지 알 수 있는 방법이 없었다.
  • 이제? useLayoutEffect의 effect와 cleanUp이 정상적으로 실행된다.
    • effect(componentDidMount)
    • cleanUp(componentWillUnmount)
  • Suspense를 서버에서도 실행할 수 있음.
  • Suspense에 쓰로틀링이 추가되었다함. 중첩된 Suspense의 fallback이 있다면 자동으로 throttle 된다
• 요거 나온다 한다. https://codesandbox.io/p/sandbox/sparkling-butterfly-s9zlw3?file=%2FAlbums.js%3A24%2C24

---

확인할 것

• Suspense에 쓰로틀링이 추가되었다함. 중첩된 Suspense의 fallback이 있다면 자동으로 throttle 된다