React&Spring&JPA

프론트엔드 (리액트)

// FrontendComponent.jsx

import React, { useState, useEffect } from 'react';

function FrontendComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 서비스로직과 통신하여 데이터 가져오기
    fetch('/api/getData')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>프론트엔드 컴포넌트</h1>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

export default FrontendComponent;

---

백엔드 (자바 - Spring Boot 기준)

// BackendController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class BackendController {

    @Autowired
    private DataService dataService;

    @GetMapping("/api/getData")
    public List<Data> getData() {
        return dataService.getAllData();
    }
}
java
Copy code
// DataService.java

import java.util.List;

public interface DataService {
    List<Data> getAllData();
}

---

// DataServiceImpl.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class DataServiceImpl implements DataService {

    @Autowired
    private DataRepository dataRepository;

    @Override
    public List<Data> getAllData() {
        return dataRepository.findAll();
    }
}

---

// Data.java (JPA Entity)

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
public class Data {
    @Id
    private Long id;
    private String name;

    // Getter와 Setter 메서드 생략
}

---

// DataRepository.java (Spring Data JPA Repository)

import org.springframework.data.jpa.repository.JpaRepository;

public interface DataRepository extends JpaRepository<Data, Long> {
}

---

데이터베이스 설정 (예시로 MySQL 사용)
데이터베이스를 설정하고 연결하기 위해 Spring Boot의 application.properties 파일을 설정해야 합니다.

# application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update

이 예시에서는 React로 작성된 프론트엔드 컴포넌트가 서비스로직으로부터 데이터를 가져오기 위해 API 엔드포인트에 요청을 보내고, 백엔드는 해당 요청을 받아 서비스로직을 실행하여 데이터베이스에서 데이터를 가져옵니다. 그리고 그 결과를 JSON 형식으로 응답합니다.