feat: React 프로젝트와 SpringBoot 프로젝트 연동

yongdae · yongdae · commit bfabcbfd6843 · 2021-09-01T22:11:46.000+09:00
서버의 /hello 주소로 데이터를 요청 한 후 응답 결과를 화면에 보여준다.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,25 +1,41 @@
 import logo from './logo.svg';
 import './App.css';
+import {useEffect, useState} from "react";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    const [message, setMessage] = useState([]);
+
+    useEffect(() => {
+        fetch("/hello")
+            .then((response) => {
+                return response.json();
+            })
+            .then(function (data) {
+                setMessage(data);
+            });
+    }, []);
+
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo"/>
+                <p>
+                    Edit <code>src/App.js</code> and save to reload.
+                </p>
+                <a
+                    className="App-link"
+                    href="https://reactjs.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn React
+                </a>
+                <ul>
+                    {message.map((text, index) => <li key={`${index}-${text}`}>{text}</li>)}
+                </ul>
+            </header>
+        </div>
+    );
 }
 
 export default App;
