[React] 리액트 프로젝트 vs 스프링부트 프로젝트 with 리액트

React는 사용자 인터페이스(UI)를 구축하는 데 많이 사용되는 프론트엔드 라이브러리입니다. React를 단일 프로젝트로 개발할 수도 있고, 스프링부트(Spring Boot)와 통합하여 사용할 수도 있습니다. 두 가지 방식의 주요 차이점과 각각의 설정 및 사용 방법을 설명하도록 하겠습니다.🙂

 

 

📌 React 단일 프로젝트

React 단일 프로젝트는 백엔드 없이 프론트엔드만 독립적으로 개발하는 방식입니다. 사용자는 주로 UI 구성에 집중하며, API 호출로 데이터를 주고받습니다.

✔️ 특징

• 독립적인 프론트엔드 프로젝트 : 백엔드 없이도 React만으로 사용자 인터페이스를 구축할 수 있습니다.
• 간편한 초기 설정 : create-react-app으로 간단하게 프로젝트를 시작할 수 있으며, 개발 서버 실행 및 빌드까지 기본 제공됩니다.

✔️ 설치 및 실행

1. 프로젝트 폴더에서 npx create-react-app 프로젝트이름 명령어로 React 프로젝트를 생성합니다.
2. 생성된 폴더에서 npm start 명령어를 실행하면 로컬 개발 서버가 실행됩니다.

✔️ 주요 구성 요소

• Public 폴더 : HTML 파일과 정적 자원을 저장하는 폴더.
• src 폴더 : 실제 코드가 위치하며, 컴포넌트, 스타일, 로직이 포함됨.
• App.js : 애플리케이션의 주요 컴포넌트가 정의된 파일.

✔️ App.js

• React의 기본 구조에서 App.js는 주요 컴포넌트로, 모든 하위 컴포넌트를 포함하는 가장 상위 컴포넌트입니다.
• App.js 파일은 컴포넌트들을 렌더링하고, 각 컴포넌트 간의 상태와 데이터를 관리하는 중요한 역할을 합니다.
• 기본적으로 src 폴더 안에 있으며, 프로젝트의 진입점과 같은 역할을 합니다.

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

 

 

📌 스프링부트 프로젝트에 React 통합

스프링부트 프로젝트에 React를 통합할 경우, React는 프론트엔드로 사용되며 스프링부트는 백엔드로 API 서버 역할을 수행합니다. 이 방식은 전체적인 풀스택 개발 환경을 제공합니다.

✔️ 특징

• 백엔드와 프론트엔드 통합 : React는 사용자 인터페이스를, 스프링부트는 데이터 처리와 서버 측 로직을 담당합니다.
• 독립 실행 가능 : 개발 시에는 프론트엔드(React)와 백엔드(Spring Boot)를 각각 독립적으로 실행할 수 있습니다.

✔️ 설치 및 실행

스프링부트 프로젝트에서 React를 사용할 때는 create-react-app을 사용하지 않고, 개별적으로 패키지를 설치하는 방법을 사용할 수 있습니다.

1. 스프링부트 프로젝트의 src/main/resources/static 폴더 안에 프론트엔드 코드를 작성할 디렉토리를 생성합니다.
2. 해당 디렉토리에서 npm init을 사용하여 npm 프로젝트를 초기화합니다.
3. 다음 명령어로 React와 ReactDOM 패키지를 설치합니다. npm install react react-dom
4. React와 관련된 필요한 구성 파일을 작성한 후, 프론트엔드 코드에서 스프링부트 서버에서 제공하는 API와 연동하여 사용할 수 있습니다.

✔️ App.js 사용 여부 및 대체 방법

일반적으로 React 프로젝트에서는 App.js가 주요 컴포넌트로 사용되어 모든 하위 컴포넌트를 관리하고, UI를 렌더링하는 진입점 역할을 합니다. 하지만, 스프링부트 프로젝트에 React를 통합한 경우, 반드시 App.js 파일을 사용할 필요는 없습니다. 대신, 프로젝트의 요구 사항에 맞게 더 유연한 구조를 사용할 수 있으며, 아래와 같은 방식이 있습니다.

1. 컨트롤러 사용 방식

스프링부트의 컨트롤러에서 HTML 페이지를 반환하고, React 컴포넌트를 해당 HTML에 렌더링합니다. 서버에서 경로를 제어하며, 백엔드와 프론트엔드가 통합된 SSR(서버 사이드 렌더링) 방식에 적합합니다.

@Controller
public class WebController {
    @GetMapping("/")
    public String index() {
        return "index"; // HTML 반환
    }
}

2. Webpack 사용 방식

Webpack을 사용하여 React 코드를 번들링한 후, 스프링부트의 정적 리소스로 제공할 수 있습니다. 이 방법은 파일 관리 및 성능 최적화에 유리합니다.

// Webpack 설정 요약
entry: './src/index.js',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
}

3. React Router 사용 방식

React Router를 사용하여 클라이언트 측에서 라우팅을 처리하며, 스프링부트는 API 서버로 동작합니다. 이 방식은 단일 페이지 애플리케이션(SPA) 구조에 적합하며, 페이지 새로고침 없이 URL 이동이 가능합니다.

// 라우팅 간단 예시
<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
</Router>

 

📌 차이점 요약

구분	React 단일 프로젝트	스프링부트와 통합된 React 프로젝트
구성	프론트엔드만으로 구성된 독립 프로젝트	백엔드(Spring Boot)와 통합된 풀스택 프로젝트
개발 방식	프론트엔드(UI) 개발에만 집중	백엔드와 프론트엔드 연동, 풀스택 개발
설치 방식	create-react-app으로 설치	npm i react react-dom으로 설치
실행 방식	npm start로 React 개발 서버 실행	프론트엔드와 백엔드를 각각 독립적으로 실행
빌드 및 배포	npm run build 후 정적 파일 제공 가능	React 빌드 후 스프링부트에 통합 배포 가능
App.js 사용 여부	기본적으로 App.js 파일을 사용하여 컴포넌트 관리	특정 상황에 따라 App.js 파일을 사용하지 않음