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

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

---

DIL-week6-\2_2024-04-09

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

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 8시~9시, 10시20분~11시10분

---

리액트 17과 18 변경 사항 살펴보기

리액트 17

• 16 => 17
  • 리액트팀 왈, 10만 개의 컴포넌트 중 호환성이 깨지는 변경 사항은 20개 미만이라 함

점진적 업그레이드

• 레거시 애플리케이션 관리 > 지원 중단된 API 고치는 작업 > 번거로움
• 17부터 일부 트리 + 컴포넌트에 대해서만 18을 선택하는 "점진적 업그레이드"가 가능하다..
• 업그레이드가 너무 부담이 되는 애플리케이션의 경우 고려
  • 이런 이유로 17버전으로 업데이트한다면 업데이트를 위한 업데이트라 할 수 있음

한 애플리케이션 내에 여러 버전의 리액트가 존재하는 시나리오

• https://github.com/wikibook/react-deep-dive-example/tree/main/chapter10/react-gradual-demo
  • mordern(17)과 legacy(16)로 구성된 예제 레포
    • mordern 애플리케이션이 legacy 애플리케이션을 lazy로 불러온다.
    • 리액트 16을 위한 루트 요소를 만드는 HOC lazyLegacyRoot
      • 랜더링 과정에서 버전 불일치로 인한 에러 발생x
      • 두 개의 리액트 루트는 -> 컴포넌트, 훅, Context를 서로 불러와서 사용할 수 있다
• 어디까지나 차선책

이벤트 위임 방식의 변경🤔

• 어떻게?

import { useEffect, useRef } from "react";

export default function Button() {
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.onclick = function 자갈치() {
        alert("🐙");
      };
    }
  }, []);

  function 오사쯔() {
    alert("🍠");
  }

  return (
    <>
      {/* 리액트 애플리케이션에서 DOM에 onClick 이벤트를 추가하는 방식 */}
      {/* handler: noop(), no operation, 암것도 하지 않음 */}
      <button onClick={오사쯔}>리액트 버튼</button>

      {/* DOM을 참조한 다음, DOM의 onclick에 직접 함수 추가하는 고전적인 이벤트 핸들러 추가 방식 */}
      {/* handler: 자갈치() */}
      <button ref={buttonRef}>DOM 버튼</button>
    </>
  );
}

리액트와 이벤트 핸들러, 이벤트 위임

• 해당 이벤트 핸들러를 추가한 각각의 DOM 요소에 부착x
• 이벤트 타입당 하나의 핸들러를 루트에 부착한다
• 이벤트 구성 단계 | 단계 | 내용 | | --- | --- | | capture | 이벤트 핸들러가 트리 최상단 요소에서부터, 실제 이벤트가 발생한 타깃 요소까지 내려가는 것 | | target | 이벤트 핸들러가 타깃 노드에 도달 / 이벤트 호출 | | bubbling | 이벤트가 발생한 요소에서부터 최상위 요소까지 올라가는 것 |
• 리액트의 경우, 최초 릴리즈부터 event delegation을 적극적으로 사용했다. 이벤트를 각 요소가 아닌 document에 연결해서 이벤트를 더 효율적으로 관리한다.
  • 16버전까지는 document, 17부터는 리액트 컴포넌트 최상단 트리(root element)
    • 점진적 업그레이드 지원
      • 모든 이벤트가 docuemnet에 있음
      • 다른 버전의 리액트를 사용하는 루트 요소에서 이벤트 전파를 막을 수 없다
      • 따라서 이벤트를 해당 리액트 컴포넌트 트리 수준으로 격리하여 이벤트 버블링 혼선을 막음
      • 점진적 업그레이드 뿐만 아니라 JQuery 등 다른 라이브러리에도 통용됨
    • 그래서 리액트 16버전에서 root element에 event stopPropagation하면 모든 이벤트를 막을 수 있었다~
• document.addEventListener를 활용해 리액트의 모든 이벤트를 document에서 확인하는 코드가 있다? > 이벤트가 document까지 전파되지 않는 경우 있음

JSX transfrom

• JSX는 브라우저가 이해할 수 있는 코드가 아님
  • 바벨, 타입스크립트 컴파일
• 16까지는 JSX 변환을 위해 'react' import가 필요했고, 없으면 에러였다, react.createElement
• 17부터는 바벨과 협력해 이러한 import 구문 없이도 JSX 변환, _jsxRuntime
  • import 삭제하니까 번들링 크기 조금이나마 줄임
  • 컴포넌트 작성 간결화. 내부 로직또한 간결하다.
• 그러므로 import React 지우고, tsconfig.json의 jsx는 "react-jsx"

event pooling 제거

• 리액트 16의 이벤트 풀링
  • SyntheticEvent 풀을 만들어서, 이벤트가 발생할 때마다 가져온 것을 의미
• SyntheticEvent: 브라우저의 기본 이벤트를 한 번 더 감싼 이벤트 객체
  • 한 번 래핑한 이벤트를 사용하기 때문에, 이벤트가 발생할 때마다 이벤트를 새로 만들어야 하므로 -> 메모리 할당 작업
  • 메모리 누수를 방지하기 위해 주기적으로 해제하는 번거로움
• 이벤트 풀링 시스템
  1. 이벤트 핸들러가 이벤트를 발생 시킴
  2. 합성 이벤트 풀에서 합성 이벤트 객체에 대한 참조를 가져옴
  3. 이벤트 정보를 합성 이벤트 객체에 넣는다
  4. 유저가 지정한 이벤트 리스너 실행
  5. 이벤트 객체 초기화 => 다시 이벤트 풀...
• 이벤트가 종료되자마자 초기화하는 방식은 직관적이지 않았다. ㅠㅠ
• 이벤트 풀링 방식으로, 이벤트 객체를 사용한다.
  • 재사용 사이에 모든 이벤트 필드를 null로 변경(재사용을 위해 초기화)
  • 초기화된 이후에 e에 접근하면 null
    • e.persist()같은 별도 처리가 필요하다
• 즉, 별도 메모리 공간에 합성 이벤트 객체를 할당해야 한다. 성능 향상에 도움이 되지 않으므로 event pooling 개념이 삭제되었다. 또한 모던 브라우저 성능이 개선되어, 이벤트 핸들러 내부에서 이벤트 객체에 접근할 때 비동기든 동기든 상관없음

useEffect 클린업 함수의 비동기 실행

• useEffect의 클린업 함수는 16버전까지는 동기였다
  • 불필요한 성능 저하가 발생했다
• 17부터는 화면이 완전히 업데이트 된 이후에 클린업 함수가 비동기적으로 실행된다.
  • 클린업 함수는 컴포넌트의 커밋 단계가 완료될 때까지 지연된다
  • "화면의 업데이트가 완전히 끝난 이후"에 실행되도록 바뀌었으며, 성능적 이점이 되었다
    • => Profiler로 commitTime 확인할 수 있음

Profiler

https://react.dev/reference/react/Profiler
<Profiler> lets you measure rendering performance of a React tree programmatically.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• 콘솔 테이블 찍으면서 퍼포먼스 확인 가능 << 신기함

컴포넌트의 undefined 반환에 대한 일관적 처리

| react | 케이스 | 에러 여부 | | ------ | ---------------------------------------------------------------- | --------- | | 16, 17 | 컴포넌트가 undefined를 반환 | O | | 16 | memo, forwardRef가 undefined를 반환 | X | | 17 | memo, forwardRef가 undefined를 반환 | O | | 18 | 컴포넌트가 undefined를 반환, memo, forwardRef가 undefined를 반환 | X |

17.0.0 더 살펴보기

• https://github.com/facebook/react/releases/tag/v17.0.0
• 리액트 16 프로젝트가 있다면 17로 업데이트 하는 것이 좋다
  • 점진적 업그레이드 대비
  • 공수가 크기 않음