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

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

---

DIL-week6-3_2024-04-10

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

오늘 읽은 내용을 markdown으로 간단히 메모
11시반~12시반

---

리액트 18

• 가장 큰 변경점은 동시성 지원!

useId

• 컴포넌트별로 유니크한 값을 생성

• 유니크한 ID

  • 컴포넌트 트리에서 컴포넌트 ID 고유성 유지해야함
  • 서버 사이드 랜더링 환경에서, 하이드레이션 일어날 때 서버와 동일한 값을 가져야 함

• useId가 생성한 값

  • :값:, CSS selector나 querySelector가 작동하지 않게함

• 생성 알고리즘

  • id는 기본적으로 현재 트리에서 자신의 위치를 나타내는 32글자의 이진 문자열

  • R은 서버사이드 생성 id, r은 클라이언트 생성 id

  • https://github.com/facebook/react/blob/36c908a6c85f271358ef91936df6ded18bbc6789/packages/react-reconciler/src/ReactFiberHooks.new.js#L2117-L2152

    function mountId(): string {
      ...
      const root = ((getWorkInProgressRoot(): any): FiberRoot);
      const identifierPrefix = root.identifierPrefix;
    
      let id;
      if (getIsHydrating()) { // 하이드레이션이라면? 즉 server-generated 이라면?
        const treeId = getTreeId();
    
        // Use a captial R prefix for server-generated ids.
        id = ':' + identifierPrefix + 'R' + treeId;
        // Unless this is the first id at this level, append a number at the end
        // that represents the position of this useId hook among all the useId ✅
        const localId = localIdCounter++;
        if (localId > 0) {
          id += 'H' + localId.toString(32); // "H + 32글자-이진문자열"
        }
    
        id+=':'; // 마지막 : 붙이기
      } else {
        // Use a lowercase r prefix for client-generated ids.
        const globalClientId = globalClientIdCounter++;
        id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
      }
    
      hook.memoizedState = id;
      return id;
    }