[React] CRA(Create React App)의 시대가 저물다

React docs의 beta 버전이 정식으로 풀렸다. 기존 reactjs.org를 주소창에 입력하면 바로 새 주소인 react.dev로 이동하지만, https://legacy.reactjs.org/ 로 예전 사이트를 여전히 볼 수 있다. 새로운 react 사이트는 아직 다국어 버전을 지원하지 않기에 한국어로 편하게 볼 수 있는 legacy react 사이트를 종종 방문할 일이 있을지도 모르겠다. 

React

 
새로운 리액트 사이트를 둘러보다가 새 프로젝트 시작하기 페이지를 보고 깜짝 놀랐다. 리액트에서 소개하는 리액트 프로젝트를 시작하는 터미널 명령어가 다음의 네 가지다. 
 
- Next.js : npx create-next-app
- Remix : npx create-remix
- Gatsby : npx create-gatsby
- Expo (for native apps) : npx create-expo-app
 
npx create-react-app이 없다! 리액트는 더이상 cra를 추천하지 않는 것일까? 이에 대한 답변은 같은 페이지에 나와있다. 해당 부분만 적당히(?) 번역해서 옮겨본다. (오역이 있다면 댓글로 알려주시면 감사하겠습니다.) 
 
 

프레임워크 없이 리액트를 사용할 수 있나요? 

물론 프레임워크 없이도 리액트를 사용할 수 있습니다. 프로젝트 페이지의 일부에 React를 사용하기를 참조하면 됩니다. 하지만 React 팀은 여러분이 새로운 앱이나 사이트 전체를 React로 구축하는 경우에는 프레임워크를 사용하는 것을 권장합니다. 

그 이유는 다음과 같습니다. 

여러분이 처음 프로젝트를 시작할 때에는 라우팅(routing)이나 데이터 패치(data fetch)가 필요하지 않더라도 나중에는 이러한 작업을 위해서 몇 가지 라이브러리를 추가하고 싶을 겁니다. 새로운 기능이 추가될 때마다 자바스크립트 번들 사이즈가 커진다면 각각의 라우트에 대한 코드를 개별 분할하는 방법을 찾아야 할 수도 있습니다. 데이터 패치에 대한 요구사항이 점점 더 복잡해질 수록 서버와 클라이언트 간 통신 네트워크 워터폴(network waterfall) 현상이 발생해서 앱이 매우 느리게 돌아간다고 느낄 수 있습니다. 네트워크 환경이 좋지 않거나 저사양 기기를 사용하는 사용자가 많아지면 콘텐츠를 처음부터 보여주기 위해서 서버에서 또는 빌드 타임 중에 컴포넌트에서 HTML을 생성해야 할 수도 있습니다. 서버에서 또는 빌드 중에 일부 코드를 실행할 수 있게끔 설정을 변경하는 일은 굉장히 까다로운 작업입니다. 

이런 문제는 리액트만 가지고 있는 문제가 아닙니다. 그렇기 때문에 Svelte에는 SvelteKit이, Vue에는 Nuxt가 있는 것이고 이러한 예는 이밖에도 많습니다. 이러한 문제를 직접 해결하기 위해서는 번들러를 라우터 및 데이터 패치 라이브러리와 통합해야 합니다. 초기 세팅 작업이 어렵지는 않지만, 시간이 지남에 따라 앱이 점점 커져도 빠르게 로딩되는 앱을 만들기 위해서는 세심한 작업들이 필요합니다. 최소한의 앱 코드를 전송하되, 그 페이지에 필요한 모든 데이터를 단 한 번의 클라이언트-서버 통신만으로 처리하고 싶을 겁니다. 자바스크립트 코드가 실행되기도 전에 인터랙티브하게 동작하는 페이지를 지원하는 것도 원할 겁니다. 어디서나 호스팅할 수 있고, 자바스크립트를 비활성화한 상태에서도 동작하는 마케팅 페이지를 위해서 모든 파일이 정적 HTML 파일인 폴더를 생성하고 싶을 수도 있습니다. 이러한 기능을 직접 구축하려면 상당한 노력이 필요합니다. 

위에서 소개한 리액트 프레임워크들은 여러분이 다른 추가 작업을 하지 않아도 이러한 문제들을 자동으로 해결해줍니다. 간단하고 쉽게 프로젝트를 시작한 다음, 여러분의 필요에 따라 앱을 확장해 나가면 됩니다. 각각의 React 프레임워크는 커뮤니티가 있기 때문에 질문에 대한 답변을 찾고, 툴을 업그레이드하는 작업을 더 쉽게 할 수 있습니다. 또한 프레임워크는 여러분이 작성한 코드에 구조를 부여해주고, 여러분과 다른 팀원들이 서로 다른 프로젝트 사이에서도 컨텍스트와 스킬을 유지할 수 있게 도와줍니다. 반대로 사용자 지정 설정을 사용하면 더이상 지원되지 않는 종속성 버전 문제 때문에 골머리를 앓기 쉬우며, 결국에는 커뮤니티도 없고, 업그레이드할 방법도 없는 프레임워크를 여러분이 직접 만들게 될 수도 있습니다. (이제까지 만들어진 프레임워크 중 하나와 유사하면서도 더 엉성하게 설계된 프레임워크겠지만요.) 

아직도 확신이 서지 않거나 위의 프레임워크가 잘 적용되지 않는 특이한 제약이 있는 앱이어서 자체적으로 사용자 지정 설정을 적용하고 싶다면 우리는 여러분을 말릴 수 없습니다! npm에서 react와 react-dom을 가져와 설치하고, Vite나 Parcel 같은 번들러로 여러분만의 커스텀 빌드 프로세스를 설정하고, 라우팅이나 정적 생성(static generation), 서버 사이드 렌더링(SSR) 등에 필요한 다른 도구들을 추가하시기 바랍니다. 

 
 
 
클래스형 컴포넌트가 가고, 함수형 컴포넌트의 시대가 온 것처럼 cra의 시대가 가고 리액트+프레임워크 조합의 시대가 온 듯 하다. 아니, 이미 왔다.