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

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

---

DIL-week6-4_2024-04-11

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

오늘 읽은 내용을 markdown으로 간단히 메모
토요일에 많이 읽어야 할 것으로 보임

---

리액트 18 버전 새로 추가된 훅

useTransition

• UI 변경을 가로막지 않고 상태를 업데이트
  • 랜더링 중단이 안되기 때문에, 랜더링이 무거운 작업에 가로막히는 현상 생길 수 있음
• ✨ 동시성 concurrency을 다룰 수 있는 새로운 훅
  • 느린 랜더링 과정일 떄 로딩 화면
  • 랜더링을 버리고 새로운 상태값으로 다시 랜더링
• 주의점
  • 내부에는 setState과 같은 상태 업데이트 함수 작업만 넘길 수 있다
  • startTransition 상태 업데이트는 다른 모든 동기 상태 업데이트로 실행이 지연될 수 있다.
  • 반드시 동기 함수! 작업을 지연시키는 startTransition 작업과 비동기 실행이 불일치이기 때문

import { useState, useTransition } from "react";

type Tab = "about" | "posts" | "contact";

export default function TabContainer() {
  const [isPending, startTransition] = useTransition(); // 인수x
  // isPending: 상태 업데이트가 진행 중인지 확인
  // startTransition: 긴급하지 않은 상태 업데이트로 간주한 set 함수를 인수로 받는 함수
  // 여러 개의 setter를 넣어줄 수도 있다.
  const [tab, setTab] = useState<Tab>("about");

  function selectTab(nextTab: Tab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <>
      {isPending ? (
        "로딩 중"
      ) : (
        <>
          {tab === "about" && <About />}
          {tab === "posts" && <Posts />}
          {tab === "contact" && <Contact />}
        </>
      )}
    </>
  );
}