React 프레임워크: 규모 있는 웹 앱 개발의 표준
React 자체는 사용자 인터페이스(UI)를 구축하기 위한 라이브러리입니다. 하지만 실제 대규모 프로덕션 환경에서는 라우팅, 데이터 패칭, 렌더링 최적화 등의 기능을 위해 React 위에 강력한 프레임워크를 사용합니다.
대표적인 React 프레임워크는 Next.js와 Remix가 있습니다.
1. Next.js의 역할과 특징
Next.js는 React 앱을 제작하기 위한 가장 대중적인 풀스택(Full-stack) 프레임워크입니다.
핵심 기능: 다양한 렌더링 방식
Next.js는 웹 성능과 SEO를 최적화하기 위해 여러 렌더링 방식을 제공합니다.
- SSR (Server-Side Rendering): 요청이 올 때마다 서버에서 페이지를 생성하여 전송. (실시간 데이터에 적합)
- SSG (Static Site Generation): 빌드 시점에 페이지를 미리 생성하여 CDN에 배포. (속도 및 SEO 최적화)
- ISR (Incremental Static Regeneration): SSG처럼 정적 페이지를 배포하지만, 정해진 시간 간격으로 백그라운드에서 페이지를 재빌드하여 업데이트함. (정적 속도 + 동적 업데이트)
2. Full-stack 지원
- API Route: 프론트엔드와 백엔드를 하나의 프로젝트에서 처리할 수 있도록 서버리스(Serverless) API 엔드포인트를 쉽게 생성 가능. (백엔드 코드를 작성할 수 있음)
- 라우팅: 파일 시스템 기반의 직관적인 라우팅 시스템 제공. (파일을 만들면 자동으로 경로가 됨)
2. 왜 프레임워크를 사용하는가?
순수 React만으로는 다음과 같은 문제가 발생합니다.
- SEO 문제: React는 기본적으로 CSR(Client-Side Rendering) 방식이라 검색 엔진이 초기 내용을 파악하기 어렵습니다. Next.js의 SSR/SSG가 이 문제를 해결합니다.
- 성능 문제: 대규모 앱의 초기 로딩 속도가 느려집니다. Next.js는 코드 분할(Code Splitting) 및 이미지 최적화 기능을 자동으로 제공합니다.
3. 핵심 개념
- 컴포넌트(Component): UI를 구성하는 독립적인 블록. (React의 기본)
- 데이터 패칭(Data Fetching):
getServerSideProps또는getStaticProps함수를 사용하여 서버에서 데이터를 가져오는 방식.