useEffect fail

backend/models/board.js

@@ -7,6 +7,7 @@ const BoardSchema = new mongoose.Schema({
   hobby: { type: String },
   created_at: { type: Date, default: Date.now },
   picture: { type: String },
+  writer: { type: String },
 });
 
 // mongoose.connect("mongodb://localhost:27017/local", {

backend/routes/users.js

@@ -289,6 +289,7 @@ router.post("/writeBoard", upload.array("photo", 1), function (req, res) {
       content: req.body.content,
       hobby: req.body.hobby,
       picture: filename,
+      writer: req.session.user.id,
     });
 
     save_board.save();
@@ -299,4 +300,20 @@ router.post("/writeBoard", upload.array("photo", 1), function (req, res) {
   }
 });
 
+router.post("/getDetailBoard", async function (req, res) {
+  let id = req.body.id;
+  console.log("/getDetailBoard호츨됨." + req.body.id);
+
+  try {
+    let detailBoard = await BoardModel.findOne({ _id: id });
+
+    console.log("detailBoard: ");
+    console.log(detailBoard);
+
+    res.send(detailBoard);
+  } catch (err) {
+    console.log(err);
+  }
+});
+
 module.exports = router;

frontend/src/App.js

@@ -6,6 +6,7 @@ import Signup from "./components/Signup";
 import Profile from "./components/Profile";
 import Board from "./components/Board";
 import WriteBoard from "./components/WriteBoard";
+import DetailBoard from "./components/DetailBoard";
 
 //class App extends Component {
 // state = {
@@ -39,6 +40,7 @@ const App = () => {
       <Route path="/profile" component={Profile} />
       <Route path="/board" component={Board} />
       <Route path="/writeBoard" component={WriteBoard} />
+      <Route path="/detailBoard/:board_id" component={DetailBoard} />
     </div>
   );
 };

frontend/src/components/Board.js

@@ -18,6 +18,7 @@ const Board = () => {
     //   console.log(err);
     // }
     async function fetchData() {
+      console.log("react board get axios 호출");
       const result = await axios.get("http://localhost:3001/board");
       console.log(result.data);
       setResponse(result.data);
@@ -37,7 +38,12 @@ const Board = () => {
       <ol>
         {response.map((res) => (
           <li key={res._id}>
-            <Link to="/detailBoard">
+            {/* <Link to={`/detailBoard/${res._id}`}>
+              <div onClick={handleOnClick(res._id)}>
+                {res.title} {res.created_at}
+              </div>
+            </Link> */}
+            <Link to={`/detailBoard/${res._id}`}>
               {res.title} {res.created_at}
             </Link>
           </li>

frontend/src/components/DetailBoard.js

+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const DetailBoard = ({ match }) => {
+  const { boardId } = match.params;
+  const [Board, setBoard] = useState([]);
+
+  useEffect(async () => {
+    async function postData() {
+      console.log("react detailBoard axios post 호출1");
+      axios
+        .post("http://localhost:3001/getDetailBoard", { id: boardId })
+        .then(function (response) {
+          console.log(response);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    postData();
+  });
+
+  useEffect(async () => {
+    async function fetchData() {
+      console.log("react detailBoard axios post 호출2");
+      const result = await axios.post("http://localhost:3001/getDetailBoard");
+      console.log(result.data);
+      setBoard(result.data);
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      {Board.map((b) => (
+        <div>
+          <div>{b.title}</div> <div>{b.content}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DetailBoard;