뉴욕타임스의 React 18 업그레이드 성공 사례 살펴보기

혁신적인 기술 도입으로 더 나은 사용자 경험 제공

뉴욕타임스는 웹사이트 성능을 높이고 사용자 경험을 개선하기 위해 React 18로 업그레이드를 단행했습니다. 이 업그레이드는 단순한 성능 향상을 넘어 SEO 최적화와 최신 기술 유지에도 큰 가치를 두고 있음을 보여줍니다.

React 18의 주요 특징과 개선점

React 18은 Concurrent Mode, 자동 배치, 서버 사이드 렌더링 및 스트리밍 업데이트 등 다양한 기능을 제공하여 보다 부드러운 렌더링과 빠른 페이지 응답성을 가능하게 합니다.

Concurrent Mode로 부드러운 렌더링

Concurrent Mode는 React 18의 핵심 기능 중 하나로, 애플리케이션의 반응성을 크게 향상시킵니다. 이를 통해 사용자 인터랙션에 대한 응답 시간이 단축되고, 페이지 로딩 속도가 빨라집니다.

자동 배치 및 전환

자동 배치 기능은 여러 상태 업데이트를 하나의 배치로 처리하여 렌더링 효율성을 극대화합니다. 이는 페이지 로딩 중 발생하는 재렌더링을 절반가량 줄여줍니다.

서버 사이드 렌더링 및 스트리밍 업데이트

서버 사이드 렌더링(SSR)과 스트리밍 업데이트는 초기 로딩 시간을 줄이고, 콘텐츠를 빠르게 표시하는 데 큰 도움이 됩니다. 이는 SEO 점수에도 긍정적인 영향을 미치게 됩니다.

성능 향상 측정 지표: INP 점수

업그레이드 후 뉴욕타임스는 INP(Interaction to Next Paint) 점수가 약 30% 감소하는 등 거의 즉각적인 성능 향상을 확인했습니다. INP 점수는 사용자가 페이지와 상호작용하는 동안 발생하는 지연 시간을 측정하는 중요한 지표로, 점수가 낮을수록 더 나은 사용자 경험을 의미합니다.

업그레이드 과정에서의 도전과 극복

React 18 업그레이드는 쉬운 일이 아니었습니다. 특히 하이드레이션 불일치 문제를 해결하는 데 많은 노력이 필요했습니다. 하이드레이션 불일치는 클라이언트와 서버 간의 데이터 불일치를 의미하는데, 이는 페이지 렌더링에 큰 영향을 미칩니다.

Enzyme에서 @testing-library/react로의 전환

뉴욕타임스는 더 이상 사용되지 않는 Enzyme 테스팅 라이브러리를 @testing-library/react로 교체하여 React 18의 새로운 기능을 안전하게 통합했습니다. 이는 테스트의 신뢰성을 높이고, 코드 품질을 유지하는 데 큰 도움이 되었습니다.

하이드레이션 불일치 문제 해결

하이드레이션 불일치 문제는 React 18이 이전 버전보다 더 민감하게 반응하기 때문에, 이를 수정하는 것이 중요했습니다. 이를 위해 클라이언트 측에서 임베디드 인터랙티브 재마운트하는 방법을 선택하여 문제를 해결했다고 합니다.

새로운 기능 도입과 성능 최적화

React 18의 새로운 기능인 createRoot와 hydrateRoot를 활용하여 보다 효율적인 렌더링을 구현했습니다. 또한, startTransition 및 React Server Components와 같은 새로운 기능의 잠재적 이점을 탐색하며 INP 점수를 지속적으로 낮추고 전반적인 기능을 개선하는 것이 주요 목표입니다.

스크립트 태그의 적절한 실행

브라우저 보안상의 이유로 innerHTML prop을 통해 추가된 스크립트 태그는 자동으로 실행되지 않기 때문에, 이를 적절히 실행하기 위해 대화형 HTML에서 추출 및 제거한 후, 컴포넌트 재렌더링 시 올바른 위치에 다시 추가했습니다.

결론: 성공적인 성능 향상과 SEO 최적화

React 18 업그레이드를 통해 뉴욕타임스는 성능과 SEO 모두에서 큰 성과를 이루었습니다. 이번 사례는 최신 기술 도입이 웹사이트 성능과 사용자 경험에 얼마나 큰 영향을 미칠 수 있는지를 잘 보여줍니다. 다른 사이트들도 이러한 성능 향상을 추구하여 더 나은 사용자 경험을 제공할 수 있을 것으로 기대됩니다.