React 19 문제점

OLD/React

React 19 문제점

joseph0926 2024. 6. 26. 11:30

몇주간 react 19에 대해서 말들이 많길래 궁금해서 찾아보았습니다

대부분 깃허브나 레딧을 번역한것이기때문에 잘못된 내용이 있을수있습니다

React 19 변경점

- React 19에서는 suspended 컴포넌트와 같은 레벨의 컴포넌트들을 미리 렌더링하지 않도록 변경된다고함

문제 제기

        - 깃허브
        1. 병렬 데이터 로딩 불가능

function ParentComponent() {
              return (
                <>
                  <ChildA />
                  <ChildB />
                  <ChildC />
                </>
              );
            }
            
            function ChildA() {
              const data = useSomeAsyncData('A');
              return <div>{data}</div>;
            }
            
            function ChildB() {
              const data = useSomeAsyncData('B');
              return <div>{data}</div>;
            }
            
            function ChildC() {
              const data = useSomeAsyncData('C');
              return <div>{data}</div>;
            }

            - ~ react 18
                - ChildA, ChildB, ChildC 데이터 요청이 동시에 시작됨
            - react 19
                - ChildA가 suspend되면 ChildB, ChildC의 렌더링과 데이터 로딩이 시작되지 않음
            - 관련 이슈
                - 깃허브
        2. 컴포넌트 패턴 붕괴
            - ~ react 18

function ProductPage({ productId }) {
                  return (
                    <>
                      <ProductDetails productId={productId} />
                      <RelatedProducts productId={productId} />
                    </>
                  );
                }
                
                function ProductDetails({ productId }) {
                  const details = useProductDetails(productId);
                  return <div>{/* ,,, */}</div>;
                }
                
                function RelatedProducts({ productId }) {
                  const relatedProducts = useRelatedProducts(productId);
                  return <div>{/* ,,, */}</div>;
                }

                - 각 컴포넌트별로 역할/책임을 분리하고 그에 해당하는 데이터를 각 컴포넌트에서 호출함
            - react 19

function ProductPage({ productId }) {
                  const details = useProductDetails(productId);
                  const relatedProducts = useRelatedProducts(productId);
                  
                  return (
                    <>
                      <ProductDetails details={details} />
                      <RelatedProducts products={relatedProducts} />
                    </>
                  );
                }

                - 상위 컴포넌트에서 데이터를 전부 로딩한 후 뿌려줌
                    - (next app router의 서버 컴포넌트 전략과 비슷한듯?)
         3. 동적 컴포넌트 렌더링 어려움

function DynamicContent() {
                  const [showExtra, setShowExtra] = useState(false);
                
                  return (
                    <>
                      <MainContent />
                      {showExtra && <ExtraContent />}
                      <button onClick={() => setShowExtra(true)}>더 보기</button>
                    </>
                  );
                }

                - ~ react 18
                    - ExtraContent와 상관없이 <button>은 렌더링됨
                - react 19
                    - ExtraContent가 suspended되면, <button>의 렌더링이 지연될수있음
         4. 타사 라이브러와의 충돌
                    - 문제를 제기한 react-query팀과의 이슈도 존재하는 것처럼 보임
         5. 서버 사이드 로직을 강제하는 것처럼 보임
                    - React 19의 변경사항은 컴포넌트 레벨에서의 데이터 페칭을 지양하고, 상위 레벨(예: 페이지나 레이아웃 컴포넌트)에서 데이터를 미리 로드하는 방식을 권장하는 것처럼 보임, 이는 서버 사이드 렌더링(SSR)이나 서버 컴포넌트에서 흔히 사용되는 패턴(NextJs)과 유사
                    - 해당 변경은 SPA 패턴, 특히 클라이언트 사이드에서 동적으로 데이터를 로드하는 패턴과 충돌
                    - 비-JavaScript 백엔드와의 호환성 문제
                    일부 개발자들은 이러한 변화가 JavaScript/TypeScript 기반의 풀스택 환경을 가정하는 것 같다고 느꼈다고 함 ??

결론

- 깃허브
        - React 팀
            - React 팀이 커뮤니티의 문제 제기를 수용
            - React 19.0 릴리스를 해당 문제에 대한 좋은 해결책을 찾을 때까지 보류
        - 가능한 해결 방안
            - Suspense에 대해 "serial" 또는 "parallel" 옵션을 제공하는 것이 좋은 방향일 수 있다는 제안
            - 'Wait for pending'과 같은 새로운 알고리즘?
                - [관련글](https://dev.to/alexandereardon/wait-for-pending-a-not-great-alternative-suspense-algorithm-1gdl)

티스토리