AWS + SpringBoot + React 실습 에러 관련 미정리

2022.06.14 update
💥 충격! 모든 기억 휘발..!💥

---

React v6
Switch 지원x

BrowserRouter, Routes, Route로

// 기존
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

function App() {
return (

<div>
  <Router>
    <HeaderComponent/>
      <div className="container">
         <Routes>
          <Route path = "/" exact element = {ListBoardComponent}></Route>
          <Route path = "/board" element = {ListBoardComponent}></Route>
          <Route path = "/create-board" element = {CreateBoardComponent}></Route>
        </Routes>
      </div>
    <FooterComponent/>
  </Router>
</div>

);
}

// v6
import {BrowserRouter, Routes, Route} from 'react-router-dom';

function App() {
return (

<div>
  <BrowserRouter>
    <HeaderComponent/>
      <div className="container">
         <Routes>
          <Route path = "/" exact element = {<ListBoardComponent/>}></Route>
          <Route path = "/board" element = {<ListBoardComponent/>}></Route>
          <Route path = "/create-board" element = {<CreateBoardComponent/>}></Route>
        </Routes>
      </div>
    <FooterComponent/>
  </BrowserRouter>
</div>

);
}

---

// 기존
class ListBoardComponent extends Component {
constructor(props) {
super(props)
this.createBoard = this.createBoard.bind(this);
}

createBoard() {
    this.props.history.push('/create-board/');
}

render() {
    return (
        <div>
            <button className="btn btn-primary" onClick={this.createBoard}> 글 작성</button>
        </div>
    );
}

}

// v6
import { Link } from "react-router-dom";

class ListBoardComponent extends Component {
constructor(props) {
super(props)
}

render() {
    return (
        <div>
            <Link className="btn btn-primary" to='/create-board'>글 작성</Link>
        </div>
    );
}

}

---

https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0#toc-maxAge
https://korshika.tistory.com/65

Request method 'POST' not supported

-> WebConfig에서 설정하고
postAxios function따로 만들어서 해결

---

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

npm add react-router-dom@6

으어 수ㅣ바

NavigateService.js

import { useNavigate } from "react-router-dom";

export function getNavigate(Component) {
return (props) => ( <Component {...props} navigation={useNavigate()} /> );
}

CreateBoardCompnent.jsx

import NavigateService, { getNavigate } from '../service/NavigateService'; <=============================
import React, { Component } from 'react';
import BoardService from '../service/BoardService';

class CreateBoardComponent extends Component {
constructor(props) {
super(props);
this.state = {
...
}
...
this.createBoard = this.createBoard.bind(this);
}

createBoard = (event) => {
    event.preventDefault();
    let navi = this.props.navigation;       <=============================
    let board = {
        ...
    };
    console.log("board => "+ JSON.stringify(board));
    BoardService.createBoard(board)
        .then(function (response){
            console.log("create~!",response.data);
            navi('/board');                 <=============================
        }).catch(err => console.log('에에ㅔ러: ', err));
}

cancel() {
    this.props.navigation('/board');        <=============================
}

render() {
    return (
        <div>
            <button className="btn btn-success" type="button" onClick={this.createBoard}>Save</button>
            <button className="btn btn-danger" type="button" onClick={this.cancel.bind(this)} style={{marginLeft:"10px"}}>Cancel</button>
        </div>
    );
}

}

export default getNavigate(CreateBoardComponent); <=============================

---

Uncaught (in promise) TypeError: _service_NavigateServiceWEBPACK_IMPORTED_MODULE_2.default.useGoToList is not a function

yarn add history@5 react-router-dom@6

---

navigate 사용 시 파라미터 전달

App.js
function App() {
return (

<div>
  <BrowserRouter>
     <Routes>
        ...
      <Route path = "/read-board/:no" element = {<ReadBoardComponent/>}></Route>    <============================= :no
    </Routes>
  </BrowserRouter>
</div>

);
}

NavigateService.js
import { useNavigate } from "react-router-dom";
import{ useParams } from 'react-router-dom'; <============================= 추가

export function getNavigate(Component) {
return (props) => (<Component {...props} navigation={useNavigate()}
params={useParams()} /> ); <============================= 추가
}

ReadBoardComponent.jsx
class ReadBoardComponent extends Component {
constructor(props) {
super(props);
this.state = {
no: this.props.params.no, <=============================
board: {}
}
}
}