React의 미래: Create React App(CRA) 대신 Vite를 사용하자

최근 React 생태계에 몇 가지 중요한 변화가 있었습니다. 

Create React App 지원 중단, react.dev 출시, Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가가 포함됩니다.

Create React App 추천 X

우선 Create React App이 추천이 되지 않습니다.

Next.js 또는 Remix 등을 추천하고 있지만 클라이언트 사이드 핸들링만 하는 경우에는 Vite 또는 Parcel을 권유하고 있습니다.

If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you—go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

https://react.dev/learn/start-a-new-react-project

Start a New React Project – React

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

Replace Create React App recommendation with Vite by t3dotgg · Pull Request #5487 · reactjs/react.dev

Next.js 및 Remix 또는 Vite와 같은 대체 도구를 사용하는 것이 좋습니다.

# Vite 전역 설치
npm install -g vite

# 프로젝트 만들기
vite create my-react-app --template react
cd my-react-app

# 서버 구동
npm run dev

react.dev 출시

React 팀은 최근 React와 관련 문서를 위한 새로운 홈인 react.dev를 출시했습니다. 

https://react.dev/
새 사이트는 이전 React 문서의 업데이트된 버전이지만 많은 새로운 기능과 리소스로 크게 개선되었습니다.
react.dev의 눈에 띄는 기능 중 하나는 풍부한 다이어그램, 일러스트레이션 및 600개 이상의 새로운 대화형 예제입니다.
새로운 리소스를 통해 개발자는 시각화된 자료로 쉽게 예제를 구현할 수 있을 것 같습니다.

특히, React를 배우기 시작한 새로운 개발자에게 도움이 많이 될 것 같습니다.

hooks 사용을 특히 강조를 많이하고 있습니다.

React

Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가

Next.js와 Remix는 React 생태계에서 인기를 얻고 있는 프레임워크들 입니다.

 

Next.js는 빠르고, SEO 친화적인 웹 애플리케이션을 쉽게 구축할 수 있게 해주는 React용 서버 측 렌더링(SSR) 프레임워크입니다.
여기에는 자동 코드 분할, 최적화된 이미지 로드, TypeScript 및 CSS 모듈에 대한 기본 제공 지원과 같은 기능이 포함됩니다.

Next.js를 사용하여 개발자는 빠르게 로드되고 뛰어난 사용자 경험을 제공하는 서버 렌더링 React 애플리케이션을 쉽게 만들 수 있습니다.

https://nextjs.org/

Next.js by Vercel - The React Framework for the Web

# Next.js로 프로젝트 만들기
npx create-next-app@latest my-react-app
cd my-react-app

# 서버 구동
npm run dev

 

Remix는 React 생태계에서 인기를 얻고 있는 또 다른 프레임워크입니다.

Remix는 더 나은 개발자 경험(DX)에 초점을 맞춘 웹 애플리케이션 구축에 대한 새로운 접근 방식입니다.
내장된 linting, 고급 라우팅 및 서버리스 기능과 같은 기능이 포함되어 있어 고품질 React 애플리케이션을 빠르고 쉽게 구축할 수 있습니다.

Remix에는 또한 복잡한 프로젝트를 쉽게 구성하고 관리할 수 있는 고유한 파일 구조가 있습니다.

https://remix.run/

Remix - Build Better Websites

# Remix로 새 프로젝트 만들기
npx create-remix@latest my-react-app
cd my-react-app

# 서버 구동
npm run dev

자세한 내용들은 공식 문서를 참고 해보세요 : )

 

fin.

 

 

출처 : https://blog.bitsrc.io/the-future-of-react-why-create-react-app-is-deprecated-and-hooks-are-the-future-83e8a087a325