React v6 관련 수정 사항

* 이 글은 기억이 휘발된 미정리본을 정리하며 작성되었습니다.

---

블로그를 따라하다보니 React 버전이 달라서 일부 코드가 아예 동작하지 않았다.
아직 문법 구조를 익히고 있는 중이기 때문에 당장 소스에서 필요한 부분 위주로 달라진 곳만 고침.

React v6는 Switch를 지원하지 않음.

Routes로 대신함.

비교 포인트
1. 기존 <Switch> 태그와 v6의 <Routes> 태그
2. <Switch>/<Routes> 안의 <Route> 태그의 속성인 element 작성방법

- v6 이전버전(예시)

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; 

function App() {
  return (
    <div>
      <Router>
        <HeaderComponent/>
          <div className="container">
             <Switch>
              <Route path = "/" exact element = {ListBoardComponent}></Route>
              <Route path = "/board" element = {ListBoardComponent}></Route>
              <Route path = "/create-board" element = {CreateBoardComponent}></Route>
            </Switch>
          </div>
        <FooterComponent/>
      </Router>
    </div>
  );
}

<Switch>
	<Route path = "/" exact element = {ListBoardComponent}></Route>
</Switch>

- 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>
  );
}

<Routes>
	<Route path = "/" exact element = {<ListBoardComponent/>}></Route>
</Routes>

---

화면(페이지) 이동 시 Link 컴포넌트 이용

비교 포인트
1. 기존 onClick 및 this.props.history.push() 방식과 v6의 <Link> 태그 이용 방식

- v6 이전버전(예시)

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>
        );
    }
}