[react] 스프링부트 프로젝트 연동

준비

• 스프링부트 프로젝트를 이클립스나 sts로 만든다.
  • 스프링부트 : 2.7.4 버전
  • 메이븐: 4.0.0 버전
  • jpa
  • tymeleaf
  • lombok
  • mariaDB
• VScode에서 react 프로젝트를 만든다.
  • bootstrap
  • react-bootstrap
  • react-dom
  • react-router-dom
  • react-redux
  • redux

java서버에서 react로 데이터 불러오기

id와 title, author가 있는 book이 있고 db에 book데이터가 저장되어있다.

그 book데이터를 react 화면에 띄워보자

java

• Book.java

package com.yujin.react.vo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Entity
@Table
@Getter
@Setter
@ToString
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Book {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private Long id;
	private String title;
	private String author;
}

• BookRepository.java

package com.yujin.react.repository;

import org.springframework.data.repository.CrudRepository;

import com.yujin.react.vo.Book;

public interface BookRepository extends CrudRepository<Book, Long>{

}

• BookService.java

package com.yujin.react.service;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Service;

import com.yujin.react.repository.BookRepository;
import com.yujin.react.vo.Book;

import lombok.RequiredArgsConstructor;
@RequiredArgsConstructor
@Service
public class BookService {
	private final BookRepository bookRepository;
	public List<Book> bookList(){
		List<Book> booklist = new ArrayList<>();
		bookRepository.findAll().forEach(book->{
			booklist.add(book);
		});
		return booklist;
	}
}

• BookController

package com.yujin.react.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;

import com.yujin.react.service.BookService;

@Controller
public class BookController {
	@Autowired
	BookService bookService;
	
	@CrossOrigin
	@RequestMapping("/book")
	public ResponseEntity<?> book(){
		
		return new ResponseEntity<>(bookService.bookList(),HttpStatus.OK);
	}
}

react에서 데이터 받아오기

• Home.js

import React, { useEffect, useState } from 'react';
import BookItem from '../../components/BookItem';

const Home = () => {
    const [books, setBooks] = useState([]);
    
    useEffect(() => { 
        fetch("<http://localhost:3333/book>").then(res => res.json()).then(res => {
            setBooks(res);
        });
    }, []);
    return (
        <div>
            <h1>책 리스트</h1>
            {books.map(book => {
                return <BookItem key = {book.id} book={book}/>;
            })}            
        </div>
    );
};

export default Home;

• BookItem.js

import React from 'react';
import { Card } from "react-bootstrap";
import { Link } from 'react-router-dom';

const BookItem = (props) => {
    const { id, title } = props.book;
    return (
        <Card>
            <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Link to = {"/book/"+id} className="btn btn-primary">상세보기</Link>
            </Card.Body>
       </Card>
    );
};

export default BookItem;