React 작업 흐름 , BoardList test

# index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js의 내용을 id가 root엘리멘트에 랜더링한다.

그럼 root는 어디있느냐 

public 에 index.html

 

<Route>  ? 페이지를 이동시킬 때 사용

<Router> ? "/"나 "/boards"요청이 왔을때 ListBoardComponent를 내보내라

<HeaderComponent>와 <FooterComponent>는 라우터 밖에있으므로 페이지가 바뀌어도 출력됨

#App.js

import "./App.css";
//한 페이지에 여러 컴포넌트 배치 또는 출력시에는 반드시 라우터 사용해야 함
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
//react-router-dom에서 BrowserRouter, Route,Switch를 import하는데 BrowserRouter는 Router로 사용하겠다.
//이 페이지에 보여지게 할 컴포넌트를 임포트함
import ListBoardComponent from "./components/board/ListBoardComponent";
import HeaderComponent from "./components/common/header";
import FooterComponent from "./components/common/footer";
function App() {
  return (
    <div className="App">
      <Router>
        <HeaderComponent />
        <div className="container">
          <Routes>
            <Route path="/" element={<ListBoardComponent />}></Route>
            <Route path="/boards" element={<ListBoardComponent />}></Route>
          </Routes>
        </div>
        <FooterComponent />
      </Router>
    </div>
  );
}

export default App;

#컴포넌트 구조

 

# 컴포넌트 만들기

import React, { Component } from "react";
//컴포넌트 클래스는 반드시 리액트의 Component 클래스를 상속받아야 함
//컴포넌트는 한 페이지에 출력되는 내용을 담은 하나의 div 라고 생각하면 됨
//여기서는 게시글 목록 출력 div 를 컴포넌트로 작성함
class 클래스명(파일명) extends Component {}

# ListBoardComponent

import React, { Component } from "react";
import BoardAxios from "../../axios/BoardAxios";
//컴포넌트 클래스는 반드시 리액트의 Component 클래스를 상속받아야 함
//컴포넌트는 한 페이지에 출력되는 내용을 담은 하나의 div 라고 생각하면 됨
//여기서는 게시글 목록 출력 div 를 컴포넌트로 작성함
class ListBoardComponent extends Component {
  constructor(props) {
    super(props); // 부모에게 매개변수를 넘김

    this.state = {
      //state 필드 선언
      //Json변수
      boards: [], //사이즈가 정해지지 않은 배열 선언
    };
  } //생성자

  componentDidMount() {
    //프론트 프레임워크에서 Mount라는 용어?
    //mount : axios 로 서버로 요청하고 받은 결과를 컴포넌트와 연결시키는 것
    //.then -> success 콜백  , re -> 받은 데이터
    //axios : 자바스크립트 ajax 통신을 처리하는 모듈
    BoardAxios.getBoardList().then((res) => {
      this.setState({ boards: res.data });
    });
    BoardAxios.getBoardDetail().then((res) => {
      console.log(res.data);
    });
  }

  //출력 처리
  render() {
    return (
      <div>
        <h2 className="text-center">Boards List</h2>
        <div className="row">
          <table className="table table-striped table-bordered">
            <thead>
              <tr>
                <th>번호</th>
                <th>제목 </th>
                <th>작성자 </th>
                <th>작성일 </th>
                <th>첨부파일 </th>
                <th>조회수</th>
              </tr>
            </thead>
            <tbody>
              {this.state.boards.map((board) => (
                <tr key={board.boardNum}>
                  <td> {board.boardNum} </td>
                  <td>{board.boardTitle}</td>
                  <td> {board.boardWriter} </td>
                  <td> {board.boardDate} </td>
                  <td> {board.boardOriginalFilename} </td>
                  <td> {board.boardReadcount} </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    ); //return
  } //render()
} // class

export default ListBoardComponent;

#BoardAxios

//게시글 서비스 요청과 관련된 함수들을 작성함
//axios : 자바스크립트 ajax 요청과 같은 일을 수행하는 모듈임
import axios from "axios";

//기본 url 지정
const BOARD_BASE_URL = "http://localhost:9999/boards";

class BoardAxios {
  //각 서비스별 메서드 작성
  //게시글 목록 조회 요청 처리용
  getBoardList() {
    return axios.get(`${BOARD_BASE_URL}/list?page=1&limit=10`);
  }

  //게시글 상세보기 요청 처리용
  getBoardDetail(boardNum) {
    return axios.get(BOARD_BASE_URL + "/" + boardNum);
  }

  //새 게시글 등록 처리용
  postBoardInsert() {}

  //게시글 수정 처리용
  putBoardUpdate() {}

  //게시글 삭제 처리용
  deleteBoard() {}

  //게시글 검색
  getBoardTitle() {}

  getBoardWriter() {}

  getBoardDate() {}
} // class closed

//외부에서 이 클래스를 import해서 사용하게 하려면
export default new BoardAxios(); //객체를 내보냄

getBoardList() 부분 url 쿼리 작성해야함 .

why? 컨트롤러에서 그렇게 받고있음. 페이징처리를 위해 

테스트용이니 임시로 1과 10을 날려서 보냄

결과