[번역] React 19는 모든것을 바꾸고 있다

시작하기에 앞서

최근에 React 19가 곧 릴리즈 된다는 소식을 접했고, 이에 관심이 생겨 찾아보게 되었습니다. medium에서 React 19 Is Chaning Everything을 읽고 번역해보았습니다. 오역, 의역이 있을 수 있으니 참고 부탁드립니다.

React 19가 곧 출시됨에 따라, 놀라운 기능 몇가지가 추가될 전망입니다. 이번 릴리즈는 단순한 업데이트가 아닐 뿐더러, React 코드에 접근하는 방식을 새롭게 재정의할 것입니다. 향상된 속도, 효율성, 더욱 간소화된 코드 작성 경험을 제공하는 것, React 19는 웹 개발을 한 단계 더 새로운 차원으로 끌어올릴 것입니다. 다가오는 릴리즈에서 React 19가 과연 어떤 변화를 준비했는지 같이 알아봅시다.

리액트 컴파일러(The React Compiler)

버전 19에서 도입된 React Compiler는 성능 최적화의 새로운 벤치마크를 설정하며 React 개발에서의 상당한 변화를 가져왔습니다. 코드명 Forget, 이 혁신적인 컴파일러는 React 코드를 표준 JavaScript로 변환하도록 설계 되었습니다. 이는 잠재적으로 두배의 효율성을 제공합니다.

'Forget'이 다루고자 하는 핵심적인 과제는, React의 익히 알려진 한계, 사소한 부분을 변경했을 때 전체 컴포넌트의 불필요한 리렌더링이 발생하는 문제를 다루는 것입니다. 역사적으로, React 개발자들은, 렌더링 과정에서 결과를 캐싱하기 위해 useMemo hook을 활용해왔습니다. 이 과정은 수동적인 개입이 필요했고, 또 종종 코드 구조를 복잡하게 만드는 경우가 많았습니다. React 19의 컴파일러는 우아하게 이 최적화를 자동화하고, 성능 향상을 이끌어 낼 뿐만 아니라 더욱 간소화 되고 깔끔한 코드를 작성할 수 있도록 합니다.

React 컴파일러의 주목할만한 이정표는 인스타그램의 운영환경(production environment)에서 배포되어 효율성과 안정성을 입증했다는 것입니다. 그러나, 현재로서는 이 컴파일러는 독점으로 남아있고, 아직 오픈 소스로 공개되지 않았다는 것에 주목해야 합니다. 이로 인해 더 넓은 커뮤니티의 접근과 통합이 제한됩니다. 하지만, 실제 대규모 환경에서의 이 기술의 실질적 활용과 이점을 보여주는데에 있어서 이는 큰 진전입니다.

Actions: 더 쉬운 데이터 처리(Easier Data Handling)

React 19는 Actions라는 개념을 도입하여, 앱에서의 데이터 처리를 더욱 쉽게 만들었습니다. 마치 forms같은 것에 Actions가 여러 함수들을 더욱 똑똑한 방식으로 연결한다고 생각해보세요. 시간이 걸리는 작업이든, 혹은 즉각적인 작업이든 데이터를 깔끔하게 처리합니다. 이는 forms나 데이터 업데이트에 관한 코드들을 더욱 간단하고, 체계적으로 작성할 수 있게 합니다.

Server Components: 더욱 빠른 웹사이트와 더 나은 SEO(Faster Websites Better SEO)

서버 컴포넌트는 React 19의 멋지고 새로운 기능중의 하나임이 틀림 없습니다. 이는 웹사이트의 일부를 유저의 브라우저 뿐만 아니라, 서버에서도 렌더할 수 있도록 합니다. 이는 누군가가 여러분의 사이트에 처음 방문했을 때, 여러분의 사이트를 더욱 빠르게 로딩할 수 있다는 것과 더 나은 SEO를 제공한다는 것을 의미합니다. 이는 특히 검색엔진에서 빨리 발견되길 원하거나, 많은 양의 컨텐츠를 보유한 웹사이트에 유용합니다.

Asset Loading: 더이상 이미지나 스타일을 기다리지 마세요.(No More Waiting for Images and Styles)

결국 웹사이트가 자연스럽고, 부드럽게 느껴지도록 하는 것에 관한 것입니다. 웹사이트에서 글자나, 사진들이 갑자기 등장하는 것을 본 적이 있나요? Asset Loading은 이러한 것들이 유저가 보기 전에 미리 준비되고, 로딩될 수 있도록 문제를 해결합니다. 이는 여러분의 사이트가 더욱 전문적이고, 잘 다듬어진 것 처럼 보인다는 의미입니다.

Document Metadata: 쉬운 SEO와 지속적인 브랜딩(Easy SEO and Consistent Branding)

React 19는 여러분이 웹사이트의 SEO를 더욱 쉽게 관리할 수 있도록 합니다. Document Metadata를 사용하면 사이트 전체에서 페이지 제목이나, 설명 등을 더욱 쉽게 조작 할 수 있습니다. 이는 검색 결과에서 여러분의 사이트가 더욱 눈에 띄도록 만들어주고, 어디에서나 브랜딩을 더욱 일관되게 유지할 수 있도록 합니다.

React Compiler, Document Metadata, 그리고 Actions같은 기능들이 발전하는 것을 보는 것은 얼마나 흥분되는 일인지 모릅니다! 이는 React팀의 실험적인 아이디어로 시작했지만, 이제는 실제로 사용할 준비를 하고 있습니다. 그들이 실제 프로젝트에서 사용하는 것을 볼 수 있다면 정말 좋을 것입니다. 저는 React 19를 실제로 사용해볼 수 있기를 정말로 기대하고 있습니다!