인프런 커뮤니티 질문&답변

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Board from "./common/Board";
import Login from "./component/Login";
import { useEffect } from "react";

function App() {
  useEffect(() => console.log("app is loading"), []);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />}></Route>
        <Route path="/board/:boardId/page/:page" element={<Board />}></Route>
        <Route path="/board/:boardId/new" element={<Board />}></Route>
        <Route path="/board/:boardId/post/:postId" element={<Board />}></Route>
        <Route
          path="/board/:boardId/post/:postId/edit"
          element={<Board />}
        ></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import React, { useEffect, useState, useContext } from "react";
import { useNavigate, useParams } from "react-router-dom"; // useParams를 import
import BoardList from "../component/BoardList";
import BoardEdit from "../component/BoardEdit";
import BoardView from "../component/BoardView";
import Layout from "../layout/Layout";
import axios from "axios";
import { TokenProcess } from "../common/TokenProcess";

export const BbsSettingContext = React.createContext();

const Board = () => {
  const { boardId, postId, page } = useParams(); //
  const [currentUrl, setCurrentUrl] = useState(null);
  const [boardSettData, setBoardSettData] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    console.log("board:::::::::::::::::");
    const fetchData = async () => {
      const access_token = localStorage.getItem("Authorization");
      try {
        const response = await axios.get(
          `http://localhost:8080/api/board/${boardId}`,
          {
            headers: {
              Authorization: `Bearer ${access_token}`,
            },
          }
        );
        setBoardSettData(response.data.returnData.board);
        let mode = "";
        if (
          window.location.pathname.split("/")[3] == "page" &&
          window.location.pathname.split("/")[5] == null
        ) {
          mode = "page";
        } else if (
          window.location.pathname.split("/")[3] == "post" &&
          window.location.pathname.split("/")[5] == null
        ) {
          mode = "view";
        } else if (window.location.pathname.split("/")[5] == "new") {
          mode = "new";
        } else if (window.location.pathname.split("/")[5] == "edit") {
          mode = "edit";
        } else {
          mode = "";
        }
        setCurrentUrl(mode);
        console.log("모드" + mode);
      } catch (error) {
        console.log(error);
        if (
          error.response.status == 401 &&
          error.response.data.data == "EXPIRE_TOKEN"
        ) {
          (await TokenProcess()) ? fetchData() : navigate("/login");
        } else {
          console.log(error);
          return false;
        }
      }
    };
    fetchData();
  }, [window.location.pathname]);
  return (
    <BbsSettingContext.Provider value={boardSettData}>
      {currentUrl == "page" ? (
        <Layout>
          <BoardList boardId={boardId} page={page} />
        </Layout>
      ) : currentUrl == "new" ? (
        <Layout>
          <BoardEdit />
        </Layout>
      ) : currentUrl == "edit" ? (
        <Layout>
          <BoardEdit boardId={boardId} postId={postId} />
        </Layout>
      ) : currentUrl == "view" ? (
        <Layout>
          <BoardView boardId={boardId} postId={postId} />
        </Layout>
      ) : null}
    </BbsSettingContext.Provider>
  );
};

export default Board;

아래는 상세 보기입니다.

import React, { useState, useEffect, useContext, useRef } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { BbsSettingContext } from "../common/Board";
import ToastEditor from "../component/ToastEditor";
import MyButton from "../common/ComButton";
import { TokenProcess } from "../common/TokenProcess";

const BoardView = ({ postId }) => {
  const titleInputRef = useRef();
  const contentsAreaRef = useRef();
  const toastEditorRef = useRef(); // ToastEditor의 ref
  const navigate = useNavigate();

  const [post, setPost] = useState({
    postId: "",
    postTitle: "",
    postContent: "",
    regDate: "",
  });
  const [boardSetting, setBoardSetting] = useState(null);
  const boardSetData = useContext(BbsSettingContext);
  const Navigate = useNavigate();
  const formatDate = (timestamp) => {
    const date = new Date(timestamp);
    const options = { year: "numeric", month: "long", day: "numeric" };
    return date.toLocaleDateString("ko-KR", options);
  };

  useEffect(() => {
    console.log("view>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
    if (boardSetData) {
      setBoardSetting(boardSetData);
      const access_token = localStorage.getItem("Authorization");
      const fetchData = async () => {
        try {
          const response = await axios.get(
            `http://localhost:8080/api/board/${boardSetData.boardId}/post/${postId}`,

            {
              headers: {
                Authorization: `Bearer ${access_token}`,
              },
            }
          );
          console.log(response.data.returnData);
          setPost({
            postId: response.data.returnData.postId,
            postTitle: response.data.returnData.postTitle,
            postContent: response.data.returnData.postContent,
            regDate: response.data.returnData.regDate,
          });
        } catch (error) {
          console.log(error);
          if (
            error.response.status == 401 &&
            error.response.data.data == "EXPIRE_TOKEN"
          ) {
            (await TokenProcess()) ? fetchData() : navigate("/login");
          } else {
            console.log(error);
            return false;
          }
        }
      };
      fetchData();
    }
  }, [boardSetData, postId]);

  const editBoard = async () => {
    navigate(`/board/${boardSetting.boardId}/post/${postId}/edit`);
  };

  return (
    <div className="BoardView">
      <div className="upInfoArea">
        <div type="text" name="boardTitle" className="titleDiv">
          {post.postTitle}
        </div>
        <div type="text" name="regId" className="regIdDIv">
          {formatDate(post.regDate)}
        </div>
      </div>
      <div className="contentArea">
        <div className="contentsText">{post.postContent}</div>
      </div>
      <section>
        <div className="btnArea">
          <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} />
          <MyButton text={"수정하기"} type="positive" onClick={editBoard} />
        </div>
      </section>
    </div>
  );
};

export default BoardView;

리스트이동이라는 버튼을 누르면 바로 이동을 하는데

브라우저에서 <- 뒤로가기 버튼을 누르면 갑자기 BoardView의 useEffect를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. ..