[React] Spring Boot와 API 연동 기본

Back-End

0. 디렉토리 구조

1. Controller

package com.enaapp.ena.controller;

import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.enaapp.ena.service.ProjectService;
import com.enaapp.ena.vo.Project;

import lombok.RequiredArgsConstructor;

@RestController
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000")
public class ProjectController {

	private final ProjectService projectService;
	
	@GetMapping("/")
	public List<Project> getProjects() {
		return projectService.getProjects();
	}
}

2. Service

package com.enaapp.ena.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.enaapp.ena.mapper.ProjectMapper;
import com.enaapp.ena.vo.Project;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class ProjectService {

	private final ProjectMapper projectMapper;
	
	public List<Project> getProjects() {
		return projectMapper.getProjects();
	}
}

3. Mapper

package com.enaapp.ena.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.enaapp.ena.vo.Project;

@Mapper
public interface ProjectMapper {

	List<Project> getProjects();
}

4. Mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.enaapp.ena.mapper.ProjectMapper">

	<select id="getProjects" resultType="com.enaapp.ena.vo.Project">
		select
			id,
			name
		from
			project
	</select>
</mapper>

5. vo

package com.enaapp.ena.vo;

import lombok.Builder;
import lombok.Getter;

@Getter
@Builder
public class Project {

	private int id;
	private String name;
}

참고) pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.5.9</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.enaapp</groupId>
	<artifactId>ena</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>ena</name>
	<description>Demo project for Spring Boot</description>
	<url/>
	<licenses>
		<license/>
	</licenses>
	<developers>
		<developer/>
	</developers>
	<scm>
		<connection/>
		<developerConnection/>
		<tag/>
		<url/>
	</scm>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>3.0.5</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter-test</artifactId>
			<version>3.0.5</version>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<annotationProcessorPaths>
						<path>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</path>
					</annotationProcessorPaths>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

참고) application.properties

spring.application.name=ena
server.port=80

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/[DB명 입력]
spring.datasource.username=[DB 사용자명 입력]
spring.datasource.password=[DB 비밀번호 입력]

mybatis.mapper-locations=classpath:mybatis/mappers/**/*.xml
mybatis.configuration.jdbc-type-for-null=NULL
mybatis.configuration.log-impl=org.apache.ibatis.logging.log4j2.Log4j2Impl 

결과

---

Front-End

0. 디렉토리 구조

1. App.js

import { RouterProvider } from "react-router-dom";
import root from "./router/root";
// 부트스트랩
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <RouterProvider router={root}/>
  );
}

export default App;

2. root.js

import { createBrowserRouter } from "react-router-dom";
import ReadPage from "../page/ReadPage";

const root = createBrowserRouter([
    {
        path: "",
        element: <ReadPage/>
    }
]);

export default root;

3. projectApi.js

import axios from "axios";

export const API_SERVER_HOST = 'http://localhost:80';

export const getProjects = async () => {

    const res = await axios.get(API_SERVER_HOST, {

    });

    return res.data;
}

4. ReadPage.js

import { useEffect, useState } from "react";
import { Col, Container, Row, Table } from "react-bootstrap"
import { getProjects } from "../api/projectApi";

const ReadPage = () => {
    
    const [project, setProject] = useState([]);

    useEffect(() => {
        // API 요청
        getProjects().then(data => {
            setProject(data);
        });
    }, []);

    return (
        <Container>
            <Row className="mt-5">
                <Col>
                    <Table>
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>name</th>
                            </tr>
                        </thead>
                        <tbody>
                            {project.map((p) => (
                            <tr>
                                <td>{p.id}</td>
                                <td>{p.name}</td>
                            </tr>
                            ))}
                        </tbody>
                    </Table>
                </Col>
            </Row>
        </Container>
    )
}

export default ReadPage;

결과