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

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

---

DIL-week6-5_2024-04-12

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

오늘 읽은 내용을 markdown으로 간단히 메모
금요일 외출 이슈로 -> 버스에서 읽었기 때문에 상세 내용은 토요일에 정리 예정!

---

리액트 훅 알아보기

• useDeferredValue

  • useTransition과 useDeferredValue: 랜더링을 지연시키는 작업에 대해 상황에 맞게 선택

    • useTransition: 상태 업데이트 코드에 접근
    • useDeferredValue: 값에만 접근 ex) props

    export default function Input() {
      const [text, setText] = useState(""); // 잦은 변경
      const deferredText = useDeferredValue(text); // 급하지 않음
    
      const list = useMemo(() => {
        const arr = Array.from({ length: deferredText.length }).map(
          (_) => deferredText
        );
    
        return (
          <ul>
            {arr.map((str, index) => (
              <li key={index}>{str}</li>
            ))}
          </ul>
        );
      }, [deferredText]); // deferredText를 의존하는 list 메모이제이션
    
      function handleChange(e: ChangeEvent<HTMLInputElement>) {
        setText(e.target.value);
      }
    
      return <><input value={text} onChange={handleChange}>{list}</input>;
    }
    

• useSyncExternalStore

  • 구독 기반의 데이터 흐름, 최신 데이터 사용 보장, 서버 사이드 랜더링 호환성

    import { useSyncExternalStore } from "react";
    
    function subscribe(callback: (this: Window, ev: UIEvent) => void) {
      window.addEventListener("resize", callback);
      return () => {
        window.removeEventListener("resize", callback);
      };
    }
    
    function useWindowWidth() {
      return useSyncExternalStore(
        subscribe,
        () => window.innerWidth,
        () => 0 // 서버 사이드 렌더링 시 제공되는 기본값
      );
    }
    
    export default function App() {
      const windowSize = useWindowWidth();
      return (
        <>
          {windowSize} {window.innerWidth}
        </>
      );
    }
    

• useInsertionEffect

  • CSS-in-js 라이브러리
  • styled-components가 사용하는 스타일을 모아서 서버 사이드 랜더링 이전에 <style> 태그에 삽입하는 작업은 모든 리액트 컴포넌트 랜더링에 영향을 미칠 수도 있는 매우 무거운 작업
  • 서버 사이드에서 스타일 코드를 삽입하는 것을 훅에서 할 수 있게 함. - DOM이 실제로 변경되기 전에 동기적으로 실행됨 - 브라우저가 레이아웃을 계산하기 전에 실행될 수 있게 한다. | 훅 | 실행 시점 | | --- | --- | | useLayoutEffect | DOM 변경 작업이 끝난 이후에 실행 | | useInsertionEffect | DOM 변경 작업 이전에 실행된다 | | useEffect | 컴포넌트 Commit 이후에 실행된다 |

• 리액트 18에서 동시성 랜더링 기능을 사용한다면, 외부 상태 관리 라이브러리가 동시성 지원을 하는지 검토가 필요하다.