전자정부프레임워크 3 - react / boot

✔react 프로젝트 설치

npx create-react-app [project-name]
cd [project-name]
npm start

✔react-router

react에서 페이지간의 이동을 위해 react-router-dom 라이브러리를 사용하였다.

npm i react-router-dom

App.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './views/js/App';
import Header from './components/js/header'
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

header.js

import '../css/header.css';
import { Link } from 'react-router-dom';

function Header(props) {
    ...
    return (
        <div className="header">
            <div className="list">
                <Link to="/info"><button>개요</button></Link>
                <Link to="/"><button>예약</button></Link>
                <Link to="/loc"><button>장소</button></Link>
                <Link to="/manage"><button>관리</button></Link>
            </div>
        </div>
    );
}

export default Header;

App.js

import '../css/App.css';
import { Route, Routes } from 'react-router-dom';
import Book from './book'
import Login from './login'
import Join from './join'
import Loc from './loc'
import Info from './info'
import Manage from './manage'
import React from "react";
// import axios from 'axios'


function App(props) {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Book/>}></Route>
        <Route path="/login" element={<Login/>}></Route>
        <Route path="/join" element={<Join/>}></Route>
        <Route path="/loc" element={<Loc/>}></Route>
        <Route path="/manage" element={<Manage/>}></Route>
        <Route path="/info" element={<Info/>}></Route>
      </Routes> 
    </div>);
}

export default App;

<BrowserRouter>

해당 태그 내에서 Router 관련 태그들을 사용 가능하다.

<HashRouter>라는 비슷한 태그가 존재한다.
URL hash를 이용한 라우터로, 정적인 페이지에 주로 이용된다.

<Link>

해당 태그를 바탕으로 <a>를 생성해준다.

<Route>

실제 컴포넌트가 렌더링되는 곳이다. vue.js의 router-view와 같다.

✔useState

vue.js에서는 reactive, ref 를 통하여 templates에 데이터를 렌더링하였다.
react에서는 이를 위해 useState를 사용하였다

// 선언
const [data, setData] = useState('')
// 사용
return(
  <div> {data} </div>
);
// 변경
setData('good')

왜 setState가 필요할까?
react에서 값이 변경시 re-rendering가 일어나지 않는다.
하지만 setState 호출시 re-rendering 발생, 변경된 값을 반영 할 수 있다.
추가) 링크(kyy's log)

✔input 속 useStae

const [data, setData] = useState('')
// 사용
return(
  <input type='text' value={data}/>
);

위와 같은 코드가 있을시, data를 통해 input의 value 값을 알 수 있다.
하지만, 위 코드에서 input에 아무리 데이터를 입력하여도 값이 변하지 않는다.
다음과 같은 방법으로 data 수정이 가능하다.

const handleChange = (e) => { 
  const { name, value }  = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
};
...
return (
  <input type="text" id="lname" name="data" value={data} onChange={handleChange}/>
);