[React] React 프로젝트를 어떻게 생성해야 할까?

React 프로젝트를 생성할 때, CRA(create-react-app)를 사용하면 아주 편하고 빠르게 시작을 할 수 있었다.
그러나 22년도 이후 CRA 업데이트가 없고, React 공식 문서(react.dev)에서도 더 이상 CRA에 대한 설명이 없다.
 
'왜 CRA 지원을 중단했을까 그리고 왜 많은 사람들이 Vite를 권장하는 걸까' 이제야 깊게 궁금해졌고 새로운 프로젝트를 생성하기 전에 이 부분을 정리하고자 관련 자료를 찾아보았다. 
아래 글을 통해 CRA의 배경지식과 React Core팀이 말하는 React 생태계에 대한 생각을 알 수 있었다. 23년도 번역글이지만 지금이라도 읽고 정리할 수 있어서 다행인 거 같다. 글을 요약해 보자면, 

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변

CRA 탄생

React 새로운 프로젝트를 생성하기 위해서는, 아래 과정을 진행해야 한다.

1. package.json 생성
2. React 설치
3. webpack, webpack plugins, loader, devServer 설치
4. webpack 설정
5. prettier, lint 설정
6. src, public 폴더 생성
   ..

신규 프로젝트를 시작하기엔 이 과정이 꽤나 복잡하고 나와 같이 개발 환경 세팅이 어려운 사람에게는 개발 시작도 전에 지쳐버릴지도 모른다. CRA가 생긴 이후로 복잡한 과정을 커맨드 한 줄의 명령어로 프로젝트 폴더와 서버를 만들 수 있게 되었다. 나에게 지금까지 CRA는 우선 빠르게 프로젝트를 시작하는 쉬운 방법이었다.

npx create-react-app my-app

 

CRA 문제점

이렇게 쉽고 편한데, 왜 CRA 지원이 중단이 되었을까? 
CRA는 온전히 CSR 앱을 생성하는 것이었다. CSR의 구조를 생각해 보면 빈 HTML과 React 번들과 함께 <script> 태그가 포함되어 있는데 코드 양이 점점 많아지면서 불편한 점이 발견된 것이다. 서비스가 커질수록 빈 HTML이 로드 후에 브라우저는 React 코드와 전체 앱 번들이 다운로드될 때까지 기다리는 시간이 길어지고, 그 동안 유저도 흰 화면만 보고 있게 되는 것이다.

Create React App은 문제의 한 측면만 해결했습니다. 당시에는 좋은 개발 경험을 제공했지만, 좋은 사용자 경험을 위해 웹의 강력한 측면을 활용하는 데 도움이 되는 충분한 구조를 제공하지 않았습니다. 이런 문제를 스스로 해결하려고 시도할 수 있지만 “eject”한 뒤 설정을 상당히 수정해야 하므로 Create React App의 장점을 무효로 했습니다. 진정으로 효율적인 React 설정은 상황에 따라 다르며 Create React App에서는 이를 달성할 수 없었습니다.

리액트 측에서 처음에 CRA는 개발자 입장에서 빠르게 개발 경험을 제공을 했지만, 결국 서비스 측면에서 고객에게 좋은 경험을 주지 못하는 구조였음을 알게 된 것이다. 그렇다고 이 문제를 해결하기 위해 CRA로 설치한 부분을 커스텀하기 위해 eject 한다면 이것은 처음 계획했던 좋은 개발 경험을 주지 못하게 되는 것이다. 따라서 CRA의 문제가 생긴 것이다.

 

React 프레임워크의 탄생

React는 라이브러리일 뿐입니다. 라우팅 또는 데이터 페칭을 수행하는 방법을 지시하지 않습니다. Create React App 또한 마찬가지입니다. 불행하게도 이는 원래 설계된 대로 React 또는 Create React App을 통해 이런 문제를 해결할 수 없음을 의미합니다. 보시다시피 이런 문제는 단순히 기능 하나의 누락을 이야기하지 않습니다. 서버 사이드 렌더링과 정적 생성, 데이터 페칭, 번들링과 라우팅과 같은 기능은 서로 연결되어 있습니다. Create React App이 나왔을 때 React는 매우 새로운 것이었고, 기능을 잘 결합하는 방법을 알아내는 것은 고사하고 개별적으로 작동하는 각 기능에 대해 파악해야 하는 것이 더 중요했습니다.

위에서 문제점을 언급했듯이 순수 클라이언트 사이드 앱의 한계로 SSG(Static Site Generation) 또는 SSR(Server Side Rendering) 지원 프레임워크가 생겨났고 React 공식문서에서 프로젝트 시작하기 안내 페이지에 Next.js, Remix, Gatsby, Expo의 사용 방법에 대해 설명되어 있다.
Next.js, Remix, Gatsby, Expo는 React 프레임워크이며, 프레임워크란 컴파일, 렌더링, 라우팅 및 데이터 페칭을 통합하는 범주의 도구를 말한다.
 

React의 생태계

React 팀은 라이브러리로써 유연성을 강조하고 이것을 유지하기 위해 노력해오고 있음을 이야기하고 있다. 또한 React 프레임워크 생태계가 앞으로 계속해서 경쟁하며 React를 최대한 활용할 수 있도록 힘을 실어주고 싶습니다고 말한다.
 
그리고 React 생태계에 흐름에 따라 CRA에 대한 방향도 정리가 된 거 같다. React Core팀에서는 CRA를 런처로 전환하는 쪽으로 의견이 합쳐지고 있다고 한다. CRA가 처음에 나왔을 땐 React 앱을 만들 때 쉽고 편하게 사용할 수 방법이었지만 지금은 생태계가 바뀌었고 더 좋은 방법을 찾고 있으며 지금은 React 프레임워크와의 건강한 관계를 그려나가고 있다고 생각이 든다.
 

Create React App의 원래 목표는 대부분의 React 사용자에게 새로운 React 웹 앱을 시작하는 가장 좋은 방법을 제공하는 것이었습니다. 우리는 이를 런처로 용도 변경하는 것이 대부분의 새로운 웹 앱에 가장 적합하다고 생각하며 변화를 명시적으로 전달한다고 생각합니다. 동시에 이전 작업 워크플로우를 위한 탈출구를 남겨둡니다. 

 
나는 새로운 프로젝트를 시작하기 전에, 'React 프로젝트는 어떻게 만드는 것이 좋은 방법일까?', 'React 앱에서 프레임워크로 시작하는 것이 가장 좋은 방법이라면 어떤 프레임워크를 사용해야 하는가?' 등에 대한 고민이 있었다.
React팀에서도 기본 값이 있는 것은 아니라고 말한다. 결국 무엇을 만드냐, 그리고 그걸 만드는 주체인 개발자가 스스로 판단하에 개발 환경을 구축해야 한다. 

다만, 프레임워크를 사용하는 이유는 나중에 SSR이 필요한 경우 마이그레이션 할 필요가 없다는 것이 가장 큰 이유가 될 것 같다. 
다음글에는 React 프로젝트 세팅 방식에 대한 선택 이유와 방법에 대해 정리를 해봐야겠다. 
 
 
참고

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변