import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
2. App.js에서 루트 엘리먼트로 <BrowserRouter>를 사용하기
import { BrowserRouter } from 'react-router-dom';
import MyTest from './mydir/Test';
import About from "./mydir/About"
function App() {
return (
<BrowserRouter>
<div className='App'>
<h2>라우팅 연습</h2>
<MyTest />
</div>
</BrowserRouter>
);
}
export default App;
import React from "react";
const Test = () => {
return(
<h2>Test 문서</h2>
);
}
export default Test;
About.js
import React from "react";
const HelloAbout = () => {
return <div>라우터에 대한 소개!</div>
}
export default HelloAbout;
결과
하나의 페이지 내에서 링크 클릭 시 해당 컴포넌트가 보여주는 UI가 보여진다. 실제로는 다른 페이지로 이동하는 것이 아니기에 이 라우터를 이용하면 SPA(Single Page Application)을 구현할 수 있다.
라우팅 실습 2 (워밍업)
App.js
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import MyTest from './mydir/Test';
import About from "./mydir/About"
import Counter from './mydir/Counter';
import Input1 from './mydir/Input1';
import Input2 from './mydir/Input2';
import MultiData from './mydir/MultiData';
function App() {
return (
<BrowserRouter>
<div className='App'>
<h2>라우팅 연습</h2>
<MyTest />
<hr/>
<nav>
{/* Link는 a 태그와 같다고 생각해도 된다. 화면 상에 a태그를 나타내는 역할.
실제로 라우팅 기능은 아래에 적을 <Route>가 실질적인 라우팅 기능을 수행한다. */}
<Link to="/">TEST</Link> |
<Link to="about">ABOUT</Link> |
<Link to="count">친구 추가</Link> |
<Link to="input1">입력 1</Link> |
<Link to="input2">입력 2</Link> |
<Link to="multi">멀티 데이터</Link> |
{/* element 속성에는 컴포넌트명을 명시. 해당 element의 페이지로 이동된다.
하나의 싱글 페이지에서 해당 컴포넌트로 이동하기에 SPA 원칙을 유지할 수 있다. */}
<Routes>
<Route path="/" element={<MyTest/>}></Route>
<Route path="about" element={<About/>}></Route>
<Route path="count" element={<Counter/>}></Route>
<Route path="input1" element={<Input1/>}></Route>
<Route path="input2" element={<Input2/>} />
<Route path="multi" element={<MultiData/>} />
</Routes>
</nav>
</div>
</BrowserRouter>
);
}
export default App;
import React, { useEffect, useState } from "react";
const MyProduct = () => {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
// 컴포넌트가 mount된 후 AJAX 요청을 수행
useEffect(() => {
// 같은 도메인에 대해서는 도메인 생략이 가능하다.
fetch(`/abcReact/practice.jsp`, {method:'GET'})
.then(response => {
if(!response.ok) {
throw new Error("HTTP Responsw Status Not OK");
}
return response.json();
})
.then(result => {
setIsLoaded(true); // 로드 성공
setItems(result.items); // AJAX로 가져온 데이터를 state에 저장
},
error => {
setIsLoaded(true);
setError(error);
console.log(error);
});
},[]); // 매 렌더링 후에만 1회 실행
if (error) {
return <div>Error : {error.message}</div>;
}
if (!isLoaded) {
return <div>Loading</div>
}
return (
<ul>
{items.map(item => (
<li key={item.id}>
<p>상품명 : {item.name}</p>
<p>가격 : {item.price}원</p>
</li>
))}
</ul>
);
}
export default MyProduct;
AJAX 요청 결과 확인
리액트에서는 fetch보다 axios 사용!
먼저 axios 의존성 추가 : npm install axios
MyProduct2.js
import axios from "axios";
import { useState, useEffect } from "react";
const MyProduct2 = () => {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
// 컴포넌트가 mount된 후 AJAX 요청을 수행
useEffect(() => {
// 같은 도메인에 대해서는 도메인 생략이 가능하다.
axios(`/abcReact/practice.jsp`, {method:'GET'})
.then(response => {
setIsLoaded(true) // 로드 성공
setItems(response.data.items) // 서버에서 받아온 자료로 상태(state) 갱신
})
.catch(error => {
setIsLoaded(true);
setError(error);
console.log(error);
})
},[]); // 매 렌더링 후에만 1회 실행
if (!isLoaded) {
return <div>Loading</div>
}
if (error) {
return <div>Error : {error.message}</div>;
}
return (
<ul>
{items.map(item => (
<li key={item.id}>
<p>상품명 : {item.name}</p>
<p>가격 : {item.price}원</p>
</li>
))}
</ul>
);
};
export default MyProduct2;
App.js
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import MyTest from './mydir/Test';
import About from "./mydir/About"
import Counter from './mydir/Counter';
import Input1 from './mydir/Input1';
import Input2 from './mydir/Input2';
import MultiData from './mydir/MultiData';
import MyProduct from './mydir/MyProduct';
import MyProduct2 from './mydir/MyProduct2';
function App() {
return (
<BrowserRouter>
<div className='App'>
<h2>라우팅 연습</h2>
<MyTest />
<hr/>
<nav>
{/* Link는 a 태그와 같다고 생각해도 된다. 화면 상에 a태그를 나타내는 역할.
실제로 라우팅 기능은 아래에 적을 <Route>가 실질적인 라우팅 기능을 수행한다. */}
<Link to="/">TEST</Link> |
<Link to="about">ABOUT</Link> |
<Link to="count">친구 추가</Link> |
<Link to="input1">입력 1</Link> |
<Link to="input2">입력 2</Link> |
<Link to="/kbs/product">상품 정보 (AJAX)</Link> |
<Link to="/kbs/product2">상품 정보 (axios)</Link> |
{/* element 속성에는 컴포넌트명을 명시. 해당 element의 페이지로 이동된다.
하나의 싱글 페이지에서 해당 컴포넌트로 이동하기에 SPA 원칙을 유지할 수 있다. */}
<Routes>
<Route path="/" element={<MyTest/>}></Route>
<Route path="about" element={<About/>}></Route>
<Route path="count" element={<Counter/>}></Route>
<Route path="input1" element={<Input1/>}></Route>
<Route path="input2" element={<Input2/>} />
<Route path="multi" element={<MultiData/>} />
<Route path="/kbs/product" element={<MyProduct/>} />
<Route path="/kbs/product2" element={<MyProduct2/>} />
</Routes>
</nav>
</div>
</BrowserRouter>
);
}
export default App;
axios 확인!
라우팅 실습 4 (AJAX -axios / DB)
DB 데이터를 가져와 라우팅 실습을 해보자! JSP를 사용할 예정이어서, 이클립스 내에 maridb driver를 넣어주자
