spring react 연동시 java의 값을 react에 어떻게 뿌려주는지 궁금합니다

Question

spring 과 react를 이용해서 회원가입과 게시판 기능을 만드려합니다많은 강의들이 spring과 jsp를 연결해서 활용하고 있어서요spring의 값 (게시판, 회원정보)를 어떻게 react에 뿌려주거나 역으로 글작성과 회원가입을 할 수 있는지 궁금합니다저는 지금 /src/main/front 경로에 프론트엔드 react 파일들을 올려놓은 상태입니다귀한시간 죄송합니다.. 답변주시면 감사드리겠습니다

Teveloper · Accepted Answer

React에서 fetch 혹은 axios로 Spring에 데이터 요청해서 가져오면 될것같은데요아래 글을 참고해보셔요https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85

코딩냠 · Answer

스프링에서는 컨트롤러에 @CrossOrigin... 관련 애노테이션으로 CORS에러 잡아주시고@RestController로 응답하시면 react에서 axios요청시 then((res)=>console.log(res.data))에서 값이 찍히는거 볼수있으실거에여

인성 절구로 빻음 · Answer

jsp + react로 작업도 가능하겠지만 react를 적극 활용한다면 spa로 개발될 것 같습니다.그렇다면 템플릿엔진은 사용하지 않아야됨으로 restcontroller을 활용하시면 되겠습니다.

어미용 · Answer

Spring과 React를 연동하여 Java의 값을 React에 전달하는 방법은 주로 RESTful API를 사용하여 이루어집니다. 아래는 간단한 예시입니다: @RestController @RequestMapping("/api") public class MyRestController { @Autowired private MyService myService; @GetMapping("/data") public ResponseEntity getData() { MyData data = myService.getData(); return ResponseEntity.ok(data); } } import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [data, setData] = useState(null); useEffect(() => { axios.get('/api/data') .then(response => { setData(response.data); }) .catch(error => { console.error('Error fetching data:', error); }); }, []); return (

{data && (

Data from Java:

{data.someField}

{/* 필요에 따라 데이터를 표시 */}

)}

); } export default App;

kenu,전독시 · Answer

from: phi3

kenu,전독시 · Answer

spring의 공식 가이드 문서도 있습니다.https://spring.io/guides/tutorials/react-and-spring-data-rest

kenu,전독시 · Answer

Phi3:LatestTo integrate Spring Boot components into a React application, you can use one of two approaches:RESTful API approachWebflux/React UI integrationI'll guide you through both options in detail. Let's start with the RESTful API approach:RESTful API ApproachIn this approach, your React components will communicate with Spring Boot via HTTP requests to its exposed endpoints. Here's a step-by-step process on how to achieve this integration:Create a new Spring Boot REST controller for each feature (bulletin board and membership information):javaCopy Code@RestController public class MembershipController { @Autowired private MembershipService membershipService; @GetMapping("/memberships") public List getAllMemberships() { return membershipService.getAll(); } // Add more methods for creating, updating and deleting memberships... }Create a corresponding Spring Boot service class that interacts with your database or data source:javaCopy Code@Service public class MembershipService { @Autowired private MemberRepository memberRepository; public List getAll() { return memberRepository.findAll(); } // Implement other methods... }Add the Spring Boot application as a backend server in your React app using Axios:First, create an api-server folder and place it inside the root of your React project (/src/main/frontend/). Inside this folder, add an index.js file to start the Spring Boot application with microservice:javascriptCopy Codeconst express = require('express'); const { MicroServer } = require("@springproject/server"); const path = require("path"); const app = express(); app.use(express.json()); app.use(express.static(path.resolve(__dirname, "../src/main/webapp"))); // Set up your Spring Boot API endpoints here... const server = new MicroServer({ app }); server.listen("0.0.0.0", 8080);In React components (e.g., MembershipList), fetch data from the backend using Axios:javascriptCopy Codeimport axios from 'axios'; export default class MembershipList extends Component { state = { memberships: [] }; componentDidMount() { this.fetchMemberships(); } fetchMemberships() { axios.get('http://localhost:8080/memberships') .then(response => { this.setState({ memberships: response.data }); }) .catch(error => console.log(error)); } render() { return (

{this.state.memberships.map((membership, index) => (

{/* Render membership data */}

))}

); } }Now you have a React application that fetches and displays data from your Spring Boot backend. This approach allows for a clear separation between frontend and backend concerns, making it easier to maintain the codebase as your project grows.Webflux/React UI Integration ApproachIf you're using Spring WebFlux with reactive streams (which is recommended), integrating directly into React might be possible, but this approach can become complex and challenging for some developers due to the use of reactive programming.However, if you want to stick with Spring Boot REST controllers in this method, you could create a separate WebSocket server that serves as an event bus between your backend and frontend. This would involve setting up an additional service class using Netty or other WebSockets libraries like RxFlux.Ultimately, the choice depends on the complexity of your requirements and your comfort level with each technology stack. The RESTful API approach is more widely used due to its simplicity and flexibility.영어로 질문하니 확실히 빠르게 답이 나옵니다.

spring react 연동시 java의 값을 react에 어떻게 뿌려주는지 궁금합니다

7개의 답변

Q&A 목록