리액트(React)는 SPA(Single-Page Application) 개발을 손쉽게 도와주는 JavaScript 라이브러리입니다. UI를 컴포넌트 단위로 개발하며, 웹 애플리케이션뿐만 아니라 네이티브 앱 개발에도 사용됩니다.
이 글에서는 SPA와 MPA의 차이, 리액트를 이용한 기본 앱 개발, 그리고 프로젝트 초기화를 도와주는 도구인 CRA(Create-React-App) 및 Next.js를 활용한 앱 제작 방법을 소개합니다.
MPA와 SPA: 차이점 및 장단점
MPA (Multi-Page Application)
- 특징
MPA는 요청마다 새로운 HTML 페이지를 서버에서 로드하는 전통적인 웹 애플리케이션 방식입니다. - 장점
- SEO(검색엔진 최적화)에 유리
- 초기 로딩 속도가 빠름
- 기능이 독립적이고, 다양한 툴과 쉽게 연동 가능
- 단점
- 페이지 이동 시마다 전체 리소스를 새로 로드
- 서버와의 왕복 통신 비용이 큼
- 개발 및 유지보수 복잡성 증가
SPA (Single-Page Application)
- 특징
SPA는 단일 HTML 파일로 시작해, JavaScript를 사용해 필요한 데이터를 로드하고 UI를 동적으로 업데이트합니다. - 장점
- 사용자 경험(UX) 향상: 빠른 페이지 전환
- 서버 요청 최소화
- 클라이언트 측에서 상태 관리 가능
- 단점
- SEO에 불리 (Next.js와 같은 프레임워크로 보완 가능)
- 초기 로딩 속도가 느릴 수 있음
- 복잡한 JavaScript 코드 필요
리액트 기본 앱 개발
1. React.js 파일을 직접 포함한 기본 HTML 구성
react.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<!-- 리액트 앱이 렌더링될 Root DOM -->
<div id="root"></div>
<!-- 리액트 및 ReactDOM 라이브러리 추가 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 사용자 정의 컴포넌트 파일 추가 -->
<script src="MyButton.js"></script>
</body>
</html>
MyButton.js
function MyButton() {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
"button",
{ onClick: () => setIsClicked(!isClicked) },
isClicked ? "클릭되었습니다." : "클릭해 주세요."
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(MyButton));위 코드를 작성 후 react.html 파일을 브라우저에서 열면 "클릭해 주세요." 버튼이 렌더링되고, 버튼 클릭 시 텍스트가 변경됩니다.
CRA(Create-React-App)로 앱 개발
CRA는 리액트 앱 개발에 필요한 환경을 자동으로 설정해주는 도구입니다.
1. CRA 설치 및 실행
cmd 창에서 타이핑합니다.
c:\javascript> npx create-react-app my-cra-app ⇐해당 위치에 설치
Creating a new React app in c:\javascript\my-cra-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
:
Success! Created my-cra-app at c:\javascript\my-cra-app
Inside that directory, you can run several commands:
npm start ⇐ 개발 서버를 실행
Starts the development server.
npm run build ⇐ 배포 버전을 생성
Bundles the app into static files for production.
npm test ⇐ 테스트를 실행
Starts the test runner.
npm run eject ⇐
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-cra-app ⇐ 다음 단계에서 할 일
npm start
Happy hacking!
c:\javascript> cd my-cra-app ⇐ 프로젝트 디렉터리로 이동
c:\javascript\my-cra-app> npm start ⇐ 개발 서버 실행
√ Something is already running on port 3000.
Would you like to run the app on another port instead? ... yes
:
Compiled successfully!
You can now view my-cra-app in the browser.
Local: http://localhost:3001
On Your Network: http://10.0.0.1:3001
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
2. CRA 실행 결과
- http://localhost:3000에서 앱 확인
- 개발 서버는 실시간으로 코드를 반영하며 자동 새로고침이 가능합니다.
- 배포 버전 생성 시 npm run build 명령어 사용
Next.js로 앱 개발
Next.js는 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 리액트 프레임워크로, SEO와 퍼포먼스 최적화에 유리합니다.
1. Next.js 앱 생성
c:\javascript> npx create-next-app@latest
√ What is your project named? ... my-next-app
// 프로젝트 이름 설정. 예: "my-next-app"이라는 폴더가 생성됨.
√ Would you like to use TypeScript? ... No / Yes
// TypeScript 사용 여부 설정. "Yes" 선택 시 정적 타입 언어를 사용하여 더 안전한 코드를 작성 가능.
√ Would you like to use ESLint? ... No / Yes
// ESLint 사용 여부 설정. "Yes" 선택 시 코드 품질 및 일관성 유지 가능.
√ Would you like to use Tailwind CSS? ... No / Yes
// Tailwind CSS 사용 여부 설정. "Yes" 선택 시 유틸리티 기반 CSS 프레임워크 추가.
√ Would you like your code inside a `src/` directory? ... No / Yes
// 코드 구조를 "src/" 디렉터리에 넣을지 여부. "Yes" 선택 시 src 디렉터리가 생성됨.
√ Would you like to use App Router? (recommended) ... No / Yes
// Next.js 13의 App Router 사용 여부 설정. "Yes" 선택 시 파일 기반 라우팅 기능 제공.
√ Would you like to use Turbopack for next dev? ... No / Yes
// Turbopack 사용 여부 설정. "Yes" 선택 시 더 빠른 개발 서버 제공.
√ Would you like to customize the import alias (@/* by default)? ... No / Yes
// 커스텀 import alias 사용 여부 설정. 기본적으로 "@/파일경로" 형식 사용.
Using npm.
Initializing project with template: default
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- eslint
- eslint-config-next
:
Success! Created my-next-app at c:\javascript\my-next-app
c:\javascript> cd my-next-app ⇐ 프로젝트 디렉터리로 이동
c:\javascript\my-next-app> npm run dev ⇐ 개발 서버 실행 ⇒ 소스 코드를 변경하면 추가 동작 없이 변경 내용이 반영
> my-next-app@0.1.0 dev
> next dev
▲ Next.js 15.0.3
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 3.5s
c:\javascript> npx create-react-app my-cra-app
Creating a new React app in c:\javascript\my-cra-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
:
Success! Created my-cra-app at c:\javascript\my-cra-app
Inside that directory, you can run several commands:
npm start ⇐ 개발 서버를 실행
Starts the development server.
npm run build ⇐ 배포 버전을 생성
Bundles the app into static files for production.
npm test ⇐ 테스트를 실행
Starts the test runner.
npm run eject ⇐
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
2. Next.js 설정 옵션
Next.js 앱 생성 시 아래와 같은 옵션을 설정할 수 있습니다.
- TypeScript 사용 여부
- ESLint, Tailwind CSS 적용 여부
- App Router, Turbopack 활성화 여부
3. Next.js 실행 결과
- http://localhost:3000에서 앱 확인
- 코드 변경 시 서버를 재시작하지 않아도 즉시 반영
'코딩 > 리액트' 카테고리의 다른 글
| [새싹 성동 2기] React ref의 이해와 사용법: 패스워드 검증 컴포넌트 구현 (0) | 2024.11.19 |
|---|---|
| [새싹 성동 2기] 상태 내리기와 상태 올리기(state) (0) | 2024.11.19 |
| [새싹 성동 2기] 리액트 이벤트 핸들링 사용법과 예시 (2) | 2024.11.19 |
| [새싹 성동 2기] 리액트 상태(state) 에 대하여 (1) | 2024.11.19 |
| [새싹 성동 2기] React로 신호등 컴포넌트 만들기 (0) | 2024.11.18 |