[React] CRA vs CNA
이번 교육 과정에서 React 프로젝트를 시작하는 방법으로 CRA와 CNA를 배웠습니다. 이 두 도구의 차이점을 더 깊이 이해하고자 추가적으로 학습하였습니다.
React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
빠른 업데이트와 렌더링 속도로 애플리케이션을 쉽고 빠르게 만들 수 있다. 컴포넌트 기반 구조로 재사용성이 높다는 장점을 지니며, 메타(Meta)의 지원으로 커뮤니티가 활성화되어 있다.
리액트 기반 애플리케이션을 시작할 수 있는 도구는 CRA(Create React App)과 CNA(Create Next App)이 있다. CRA는 일반적인 리액트 애플리케이션 개발에 사용되며, CNA는 Next.js 프레임워크를 기반으로 한 애플리케이션 개발에 사용된다.
CRA
Create React App
CRA는 SPA를 구축하는 데 적합하며, CSR 방식만 지원한다. 주로 내부 시스템 또는 SEO가 중요하지 않은 프로젝트에 사용된다.
프로젝트 생성 방법은 아래와 같다.
npx create-react-app 프로젝트이름
리액트 공식 문서에서는 리액트를 웹 애플리케이션의 특정 부분에 적용하거나 전체 애플리케이션을 구축하는 데 사용할 수 있다고 이야기 하고 있다. 그러나 전체 애플리케이션을 리액트로 개발할 때는 개발 효율성과 유지 보수성 측면에서 Next.js와 같은 프레임워크를 사용하기를 권장하고 있다. 자세한 이유는 다음과 같다.
- 기능 통합의 복잡성 애플리케이션이 사이즈가 커짐에 따라 따라 라우팅, 데이터 페칭, 코드 스플리팅 등의 기능이 필요해진다. 이러한 기능을 개별적으로 구현하려면 번들러, 라우터, 데이터 페칭 라이브러리 등을 직접 통합해야 한다.
- 성능 최적화의 어려움 자바스크립트 번들의 크기가 커질수록 각 라우터에 대한 코드 스플리팅이 필요하며, 데이터 페칭이 복잡해지면 네트워크 지연으로 인해 애플리케이션이 느려질 수 있다. 또한, 네트워크 상태가 좋지 않거나 저사양 디바이스를 사용하는 사용자들을 위해 SSR(Server Side Rendering)이나 정적 사이트 생성(Static Site Generation)을 통해 초기 HTML을 제공하는 것이 중요하다.
- 프레임워크의 필요성 프레임워크를 사용하면 기능들이 통합되어 있기 때문에 개발자가 별도로 구현하지 않아도 된다.
- 커뮤니티와 유지 관리 프레임워크는 활발한 커뮤니티를 가지고 있어 문제 해결과 도구 업그레이드가 용이하다.
추가 개념정리
- 라우팅 (Routing) 애플리케이션에서 특정 URL과 해당 URL이 보여줄 컴포넌트 또는 페이지를 연결하는 작업으로, React Router 등을 사용한다.
- 데이터 페칭 (Data Fetching) 외부 서버나 API에서 데이터를 가져오는 작업으로, fetch, axios 등을 사용한다.
- 코드 스플리팅 (Code Splitting) 애플리케이션의 코드를 여러 청크로 분리하여 필요한 부분만 로드하는 기술로, React.lazy, Suspense 등을 사용한다.
CNA
Create Next App
CNA는 Next.js 프레임워크를 기반으로 애플리케이션을 제작할 때 사용하는 도구로, 다양한 렌더링 방식을 지원한다. 마케팅 사이트, 블로그, 전자 상거래 플랫폼과 같이 빠른 로딩 속도와 SEO가 중요한 프로젝트에 주로 사용된다.
프로젝트 생성 방법은 아래와 같다.
npx create-next-app@latest 프로젝트이름
Library vs Framework
라이브러리와 프레임워크의 주요한 차이는 제어 흐름을 누가 가지고 있는지이다. 라이브러리는 개발자가 직접 흐름을 제어하며, 필요한 부분만 가져다 쓰는 형태이다. 반면, 프레임워크는 흐름 제어를 개발자가 아닌 프레임워크가 직접 한다.
출처 [Stack Overflow]
최종 정리
| CRA | CNA | |
| 사용 목적 | SPA (Single Page Application) 개발 | SSR(Server-Side Rendering) 및 SSG(Static Site Generation) 지원 |
| 주요 프레임워크 | React | Next.js (React 기반 프레임워크) |
| 렌더링 방식 | CSR | CSR, SSR, SSG, ISR |
| 사용 용도 | 간단한 SPA나 CSR 중심의 앱 개발 | 블로그, SEO 최적화 |