[React] 리액트 버전 18은 무엇이 달라졌을까? / React v18

들어가며

 본 포스팅은 아래 링크된 리액트 공식문서를 바탕으로 작성된 글입니다.

 

https://ko.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

The Plan for React 18 – React Blog

 

리액트 18

공식문서에 따르면, 리액트의 다음 공식버전인 v18이 작업중이라고 소개하고 있습니다. 이번 리액트 버전 18부터는 따로 react-18이라는 깃허브 워킹 그룹을 만들어, 활발한 토론을 통해 다음 버전을 구성해 나아가고 있는 모습을 보입니다. 리액트 버전 18이 가까워지며 나오게 될 중요한 공지 또한 이 워킹 그룹을 통해 발표할 것이라고 하네요.

 

이번 릴리스에서는 새로운 시도를 하고 있습니다. React 커뮤니티 전체의 전문가, 개발자, 라이브러리 저자 및 교육자 패널을 초대하여 React 18 Working Group에 참여하여 피드백을 제공하고 질문을 하며 릴리스에 대한 협업을 진행했습니다. 우리는 우리가 원하는 모든 사람들을 이 초기의 소규모 그룹에 초대할 수는 없었지만, 만약 이 실험이 성공한다면, 우리는 미래에 더 많은 사람들이 있기를 바랍니다!

 

 

해당 워킹 그룹에 들어가보면, 리액트 개발팀의 공지사항 뿐만 아니라, react 18을 체험해볼 수 있는 react-alpha 설치방법, 유저들의 궁금함을 담고 있는 QnA 들도 확인할 수 있습니다.  

 

리액트 18 체험하기

npm install react@alpha react-dom@alpha

위와 같이 alpha 버전과 beta 버전을 설치해서 사용해볼 수 있습니다.

 

• alpha : 대부분의 기능이 안정적이라고 생각될 때 배포
• beta : feature가 추가될 때 마다 배포, 버그 발생 가능

새로운 기능을 체험해보는 것도 좋지만, 아래를 참고하며 실제 서비스에 적용시키는 데에는 항상 주의를 기울입시다.

Library Alpha: Available today Public
Beta: At least several months Release Candidate
(RC): At least several weeks after Beta
General Availability: At least several weeks after RC

 

Installing React 18 Alpha 관련 문서

• https://github.com/reactwg/react-18/discussions/9

 

리액트 17에서 18로

 

작년에 공개된 리액트 버전 17은 개발자가 사용할만한 직접적인 특징은 갖고 있지 않았고, 점진적인 업데이트를 가능케 함에 중점을 뒀었죠.

그리고 concurrent mode를 소개하면서, 차차 리액트가 개선할 방향에 대해 소개했었습니다. 

 

리액트 18 또한 그 흐름을 이어가면서, 최대한 concurrent mode를 최대한 애플리케이션을 바꿀 필요 없이 (문서에서는 break your app이라고 표현하네요), 새롭게 생기는 feature들을 기존 코드에 문제가 없게끔 적용시킬 수 있게 하는 데에 많은 신경을 쓰고 있다고 합니다. 실제로 facebook도 하루만에, 아니 단 반나절의 노력을 들여서 수많은 컴퍼넌트들을 리액트 18로 바꾸었고, 아무 문제가 없었다고 합니다. 추가적인 변경도 없이 말이죠.

 

실무에서도 하나의 라이브러리나 프레임워크를 새 버전으로 올리는 것은 굉장히 리스키하고, 꺼려지는 부분이죠. React가 그런 맥락에서 이런 gradual adoption 전략을 굉장히 중요시하게 생각하는 것 같습니다.

 

주요 특징

 

그렇다면 이번 리액트 버전 18에서는 어떤 feature들이 생겼을까요?

 

이번에 공개된 React v18 의 주요 특징은 다음과 같습니다.

 

• automatic batching 을 바탕으로한 효율적인 렌더링
• 새로운 API 인 startTransition -> Suspense 와 함께 덜 중요한 상태 업데이트를 늦추는 것이 가능해짐
• 새로운 Suspense SSR 구조 -> 효율적인 hydration을 바탕으로 속도 증가

위 기능들은 concurrent rendering (구 concurrent mode) 이라는 메커니즘이 가능해지면서 해당 메커니즘을 바탕으로 생기게 되는 feature라고 합니다. 이전 버전에서 제시한 새로운 메커니즘과 방향성에 맞는 feature들을 점진적으로 하나씩 늘려가고 있는 것으로 보이네요.

 

시간상 가능하다면 차차 위 특징을 하나씩 조금 더 자세히 포스팅 해보려구 해요. 

모두 안정화되어서, 실무에 쓰일 날이 어서 오기를 빕니다.. 영원하자 React 🥳 !!  (새로운 걸 또 처음부터 익히기는 싫거든요 ㅠㅠ)