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

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import MainPage from "./pages/MainPage";
import Board from "./pages/Board";
import { useEffect } from "react";
function App() {
  useEffect(() => console.log("app is loading"), []);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainPage />}></Route>
        <Route path="/board/:bbsId" element={<Board />}></Route>
        <Route path="/board/:bbsId/new" element={<Board />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom"; // useParams를 import
import BoardList from "../pagesComponent/BoardList";
import BoardEdit from "../pagesComponent/BoardEdit";
import BoardView from "../pagesComponent/BoardView";
import Layout from "../layout/Layout";
import axios from "axios";
export const BbsSettingContext = React.createContext();

const Board = () => {
  const { bbsId } = useParams(); //
  const [currentUrl, setCurrentUrl] = useState(null);
  const [boardSettData, setBoardSettingData] = useState(null);

  useEffect(() => {
    let mode =
      window.location.pathname.split("/")[3] == null
        ? "list"
        : window.location.pathname.split("/")[3];
    console.log(`mode::::::::::::::${mode}`);
    setCurrentUrl(mode);
    axios
      .get("http://localhost:8080/board/" + bbsId)
      .then((response) => {
        const boardSettData = response.data.bbsEntity;
        console.log(boardSettData);
        setBoardSettingData(boardSettData);
      })
      .catch((error) => console.log(error));
  }, [currentUrl]);

  return (
    <BbsSettingContext.Provider value={boardSettData}>
      {currentUrl == "list" ? (
        <Layout>
          <BoardList />
        </Layout>
      ) : currentUrl == "new" ? (
        <Layout>
          <BoardEdit />
        </Layout>
      ) : currentUrl == "edit" ? (
        <Layout>
          <BoardEdit />
        </Layout>
      ) : currentUrl == "view" ? (
        <Layout>
          <BoardView />
        </Layout>
      ) : (
        <BoardList />
      )}
    </BbsSettingContext.Provider>
  );
};

export default Board;

import React from "react";
import { useContext, useHistory } from "react";
import { BbsSettingContext } from "../pages/Board";
import PageNationPage from "./PageNationPage";
import { useNavigate } from "react-router-dom";
const BoardList = () => {
  const boardSetData = useContext(BbsSettingContext);
  console.log(boardSetData);
  const Navigate = useNavigate();
  const handleBoardEdit = () => {
    // 원하는 동작을 수행할 코드를 여기에 추가
    console.log("쓰기로 이동");
    Navigate("/board/1/new");
  };

  return (
    <div className="BoardList">
      <table className="bbsTable">
        <colgroup>
          <col style={{ width: "10%" }} />
          <col style={{ width: "40%" }} />
          <col style={{ width: "10%" }} />
          <col style={{ width: "20%" }} />
          <col style={{ width: "10%" }} />
        </colgroup>
        <thead>
          <tr>
            <th scope="col">번호</th>
            <th scope="col">제목</th>
            <th scope="col">작성자</th>
            <th scope="col">등록일</th>
            <th scope="col"> 조회</th>
          </tr>
        </thead>
      </table>
      <PageNationPage />
      <button onClick={handleBoardEdit}>쓰기</button>
    </div>
  );
};

export default BoardList;

import React from "react";
import { useState, useEffect, useContext } from "react";
import { BbsSettingContext } from "../pages/Board";
const BoardEdit = () => {
  const boardSetData = useContext(BbsSettingContext);
  console.log(boardSetData);

  return <div>BoardEdit</div>;
};

export default BoardEdit;

안녕하세요 다름이 아니라 일기장 보고 게시판을 응용해서 만들던 도중에 안되는게 있어서 질문드립니다.

http://localhost:3000/board/1
이 리스트로 나오는데요 ...
거기서 쓰기를 누르면
http://localhost:3000/board/1/new
으로 위에 url은 바뀌는데
밑에 ui는 전혀 바뀌질 않습니다 .그리고 Board.js에 useEffect쪽에 콘솔로 찍어봐도 들어오지가 않는데 이유를 좀 알수있을까요 ?????

근데 쓰기 버튼말고 그냥 직접 url을 입력하고 enter를 입력하면 이동합니다 .