[react.js]게시판 만들기1

우선 Backend게시판이 완성되어 있다는 전제하에 포스팅한다.
뭐 사실 프론트 구현만 할 생각이면 이것만 따라해도 무방.
(다만 Backend 구성을 안한다면 데이터 연동부분 제대로 알기 어려울것)

/frontend/package.json

//이렇게 설치했음
***
"axios": "^0.19.1",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"styled-components": "^4.4.1"
***

router 환경셋팅

yarn add react-router-dom

/frontend/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

/frontend/src/routes/List.js

import React, { Component } from 'react';

class List extends Component {
  render() {
    return <div>List</div>;
  }
}

export default List;

/frontend/src/routes/Read.js

import React, { Component } from 'react';

class Read extends Component {
  render() {
    return <div>Read</div>;
  }
}

export default Read;

/frontend/src/routes/Write.js

import React, { Component } from 'react';

class Write extends Component {
  render() {
    return <div>Write</div>;
  }
}

export default Write;

 

기본적으로 페이지들이 생성됐다면 중앙(App.js)에서 관리해주자

/frontend/src/App.js

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import List from './routes/List';
import Read from './routes/Read';
import Write from './routes/Write';

class App extends Component {
  render() {
    return (
      <div>
        <div className="lnk">
          <ul>
            <li>
              <Link to="/">List</Link>
            </li>
            <li>
              <Link to="/read">Read</Link>
            </li>
            <li>
              <Link to="/write">Write</Link>
            </li>
          </ul>
        </div>
        <div className="route">
          <Route exact path="/" component={List} />
          <Route path="/read" component={Read} />
          <Route path="/write" component={Write} />
        </div>
      </div>
    );
  }
}

export default App;

이제 기본적인 라우터 설정은 끝났다. 다음 포스팅에서 계속한다.

2020/04/16 - [프로그램 강좌] - [react.js]게시판 만들기1

2020/05/07 - [프로그램 강좌] - [react.js]게시판 만들기2

2020/01/18 - [프로그램 강좌] - [express]게시판만들기 #1

2020/01/20 - [프로그램 강좌] - [express]게시판 만들기 #2

2020/01/18 - [프로그램 강좌] - [express]게시판 만들기 #3

2020/01/29 - [프로그램 강좌] - [express]게시판 만들기 #4