Spring MVC 에서 React 로 전환

🧩 React 도입 시 백엔드는 어떻게 구성하면 좋을까? (Spring MVC vs React 구조 정리)

이번 프로젝트에서는 기존에 사용하던 Spring Framework + JSP 조합에서 프론트엔드를 React로 전환하는 작업을 하게 되었다.

React는 프론트와 백이 완전히 분리되는 구조라 처음에는 기존의 MVC 패턴과 어떻게 연결될지에 대해 꽤 혼란이 있었다.
특히 "React를 쓰면 기존의 Model-View-Controller는 어떻게 되는 거지?"라는 질문이 생겼다.

그래서 React를 도입하면서 기존 Spring MVC 구조와 어떻게 달라지는지를 간단히 정리해봤다.
(이 부분은 나중에 또 다른 프로젝트에서 참고할 일이 있을 것 같아서!)

---

✅ 기존 방식: Spring MVC + JSP

기존에는 브라우저에서 요청이 들어오면 Java(Spring) 서버가 다음과 같은 순서로 처리했다:

요청 → Controller → Service → Repository → DB
                        ↓
                     Model (DTO)
                        ↓
                    View (JSP로 HTML 렌더링)

 

• 서버가 직접 HTML을 만들고, 그걸 응답으로 내려주는 구조.
• 흔히 말하는 서버 사이드 렌더링(SSR) 방식.

---

⚛️ React로 전환하면?

React는 SPA(Single Page Application) 구조로, 브라우저가 HTML + JS를 내려받은 뒤
브라우저에서 동적으로 화면을 렌더링하게 된다.
이때 서버는 오직 데이터만 JSON으로 전달하는 역할.

React (JS/HTML 렌더링 + 사용자 이벤트 처리)
         ↑
    REST API 요청
         ↓
Java Spring 서버 (Controller → Service → Repository → DB)

• 서버는 JSP를 사용하지 않고, 오직 JSON 형태로 데이터를 응답하는 API 서버로 사용.
• 프론트와 백이 도메인도 다르고, 개발도 완전히 분리된 구조가 됨.

---

🔍 그럼 MVC 패턴은 어디로?

처음엔 "React에서는 Controller나 Model이 없잖아?"라고 생각했는데, 실제로는 다음처럼 대응된다.

역할	Spring (기존 MVC)	React
Model	DTO, Entity	상태(state), useState, Redux 등
View	JSP	JSX 컴포넌트
Controller	@Controller 클래스	이벤트 핸들러, API 호출 함수 등

 

→ React 내부적으로도 MV*-like 구조가 적용된다고 보면 된다.

---

🛠️ React + Spring Boot 연동 구조 예시

 

📦 시스템 구조

[React Frontend] ←→ [Spring Boot API 서버] ←→ [DB]
      ↑                        ↑
   CSR 방식               REST API (JSON)

📁 프론트 (React)

• axios나 fetch로 Spring API 서버에 데이터 요청
• useEffect, useState, Redux, Context 등으로 상태 관리
• HTML 렌더링은 JSX

// React에서 API 호출 예시
import axios from 'axios';

useEffect(() => {
  axios.get('http://localhost:8080/api/users')
    .then(res => setUsers(res.data))
    .catch(err => console.error(err));
}, []);

---

📁 백엔드 (Spring Boot)

• @RestController로 JSON 응답 제공
• @GetMapping, @PostMapping 등 RESTful 방식으로 API 구성
• View(JSP)는 제거, 템플릿 엔진도 사용하지 않음

@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping
    public List<UserDto> getUsers() {
        return userService.getAllUsers();
    }
}

---

📦 실제 프로젝트 구조 예시

📂 backend-spring
│   └─ src/main/java/...
│   └─ build.gradle / pom.xml
│   └─ application.yml
│
📂 frontend-react
│   └─ src/
│       └─ components/
│       └─ pages/
│       └─ api/axios.js
│   └─ package.json
│   └─ vite.config.js / cra 설정

 

• 완전히 두 프로젝트로 분리되어 있음
• 배포 시에는 React를 빌드해서 정적 파일로 만든 뒤 Spring에서 서빙하거나, Nginx로 React 따로 배포도 가능

---

🧠 정리

• React를 쓰면 프론트와 백이 명확히 분리된 구조가 된다
• 백엔드는 View를 만들지 않고, 오직 API만 제공
• 프론트도 내부적으로 상태 관리 시스템을 통해 Model 역할을 수행
• 결과적으로 "프론트의 MVC + 백엔드의 MVC"가 조화롭게 동작하는 구조로 발전함

---

이런 구조가 처음에는 다소 생소할 수 있지만, 한 번 개념이 잡히면 각 레이어의 책임이 명확해서
유지보수나 확장 측면에서 훨씬 깔끔해지는 느낌이다.