React 13 변경점 중요한 것만 빠르게 짚어보기

 

 

오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 NextJs가 2022년 10월말에 새로 메이저 넘버링 업데이트가 되어 간략하게 살펴보려고 합니다. 새롭게 13버전이 출시되었네요~

 

 

먼저 page폴더가 없어지고 app폴더가 생깁니다. 그와 동시에 예약된 파일명들을 통해서 주로 많이 사용되는 기능들을 쉽게 추가할 수 있게 되었습니다.

 

간략하게 살펴보자면 기존에 pages안에 생성하던것과 동일하게 자신이 생성하고 싶은 경로명으로 폴더를 생성하면되는데요, 각각의 파일이 개별적인 경로가 되던 것이 이제는 page.js가 UI를 나타내도록 변경되었습니다.

 

화면을 보시면 예전에는 pages 폴더 하위의 모든 파일들이 하나의 경로였다면 이제는 app하위에서 page라고 지어진 파일만 접근이 가능합니다. 예전에는 컴포넌트를 쪼갤때 pages밖에 따로 분리했어야됐다면 이젠 app안에 같이 정리해둘 수 있을 것 같네요.

 

 

그 외에도 많은 페이지들에 기본적으로 들어가는 layout, loading, error 등은 예약된 파일로써 지원한다고 합니다.

 

다만 13버전에서는 기존의 pages를 새로운 app과 동시에 사용이 가능하다고 하니 점진적으로 마이그레이션이 될 수 있을 것 같긴합니다. 하지만 pages의 지원이 중단되는 시점부터는 더이상 next 버전을 간단하게는 올릴 수 없는 레거시 코드가 될 것 같네요.

 

 

13버전부터는 app폴더안에 들어가는 컴포넌트들은 기본으로 React Server Component가 된다고 합니다. Server component는 서버에서 렌더링되는 컴포넌트이고, 반대로 Client component는 클라이언트에서 받아서 렌더링되는 컴포넌트입니다. Server component는 필요한 자바스크립트 작업들을 최대한 다 해서 클라이언트에게 보내주기 때문에 클라이언트가 받게되는 js파일 사이즈가 줄어든다고 합니다.

 

추가적으로 이제는 streaming 기능을 지원하여 데이터를 기다릴 필요가 없는 부분은 먼저 보내서 사용자에게 보내주고 나머지 기다려야되는 부분은 로딩상태로 보여준다고 합니다. 사용자들에게 더 빠른 피드백을 줄 수 있을 것 같습니다.

 

 

Next13에서는 번들링툴로 Turbopack이 추가된다고합니다. vercel측에 따르면 웹팩보다 700배빠르고, Vite보다 10배빠르다고 합니다. 

 

그 외의 자잘한 변경사항들은 스킵하도록 하겠습니다

 

next의 13버전을 사용하려면 최소 18.2버전의 React가 필요하고, 14.6버전의 노드가 필요합니다. 그리고 이제는 더이상 인터넷 익스플로러를 지원하지 않는다고 하네요.

 

끝!