반응형
getContent(App.js)
getContet()
- render()내에 길고 복잡한 문장을 getContent()함수로 분리
- getContent()에서는 필요한 data를 return으로 전달
- return : 함수내의 값을 함수 밖으로 전달
- render()에서는 this.getContent()로 함수 내의 코드 로드
Router
기존 렌더링 호출 함수 및 작성 코드 수정
import ReactDOM from 'react-dom'
변경된 작성 코드
import ReactDOM from 'react-dom/client'
BrowserRouter 사용하기(App.js)
BrowserRouter,Router,Route 컴포넌트 작성
- BrowserRouter :UI의 최상위에 작성
- Routes : Route set
- Route: 링크 설정
path,element 컴포넌트 작성
- path : 브라우저에 출력될 주소
- element : 화면에 출력될 컴포넌트
Link 작성
- <a>요소 사용하려면 페이지가 reload
- <Link>를 사용하여 페이지 reload없이 <a> 요소와 같은 효과 사용
- <Link>클릭할 콘텐트 </Link>
to 속성 작성
- <Link to='<Route>의 path 속성값'> 클릭할 콘텐트 </Link>
//app.js
import "./App.css";
import {BrowserRouter, Routes, Route, NavLink, Link} from "react-router-dom";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Topics from "./components/Topics";
import Notfound from "./components/Notfound";
function App() {
return (
<BrowserRouter>
<div className="App">
<Link to="/">
<h1>Welcome!!!</h1>
</Link>
<nav>
<ul>
<li>
<NavLink to="/Topics">토픽</NavLink>
</li>
<li>
<NavLink to="/Contact">콘텍트</NavLink>
</li>
</ul>
</nav>
<Routes>
<Route index element={<Home />}></Route>
<Route path="/Topics/*" element={<Topics />}></Route>
<Route path="/Contact" element={<Contact />}></Route>
<Route path="/*" element={<Notfound />}></Route>
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
//home.js
export default function Home() {
return (
<div>
<h2>HOME</h2>
</div>
);
}
//Topics.js
import {NavLink, Routes, Route, useParams} from "react-router-dom";
import Notfound from "./Notfound";
const contents = [
{id: 1, title: "HTML", comp: <Topics1 />},
{id: 2, title: "JS", comp: <Topics2 />},
{id: 3, title: "React", comp: <Topics3 />},
];
function Topic() {
const param = useParams();
const topic_id = Number(param.Topic_id);
let selected_comp = <Notfound />;
for (let i = 0; i < contents.length; i++) {
if (topic_id === contents[i].id) {
selected_comp = contents[i].comp;
break;
}
}
// console.log(param);
// console.log(topic_id);
// if (topic_id == 1) {
// selected_comp = <Topics1 />;
// } else if (topic_id == 2) {
// selected_comp = <Topics2 />;
// } else if (topic_id == 3) {
// selected_comp = <Topics3 />;
// } else {
// selected_comp = <Notfound />;
// }
return <div>{selected_comp}</div>;
}
export default function Topics() {
const list = [];
for (let i = 0; i < contents.length; i++) {
list.push(
<li key={contents[i].id}>
<NavLink to={"Topics/" + contents[i].id}>{contents[i].title}</NavLink>
</li>
);
}
return (
<div>
<h4>Topics</h4>
<nav>
<ul>{list}</ul>
</nav>
<Routes>
<Route path="Topics/:Topic_id" element={<Topic />}></Route>
{/* <Route path="Topics/2" element={<Topics2 />}></Route>
<Route path="Topics/3" element={<Topics3 />}></Route>
<Route path="Topics/*" element={<Notfound />}></Route> */}
</Routes>
</div>
);
}
function Topics1() {
return (
<div>
<h2>t1</h2>
</div>
);
}
function Topics2() {
return (
<div>
<h2>t2</h2>
</div>
);
}
function Topics3() {
return (
<div>
<h2>t3</h2>
</div>
);
}
// contact.js
export default function Contact() {
return (
<div>
<h6>Contact</h6>
</div>
);
}
//app.css
/*
a {
text-decoration: none;
color: cornflowerblue;
}
.active {
color: tomato;
}
*/배열과 반복문 파라미터 활용
배열과 반복문 활용하여 라우팅 작성
- 모듈가져오기
- import {useParams} from "react-router-dom"
728x90
'React > ReactJS' 카테고리의 다른 글
| Upgrade CRA to VITE(React)__001 (1) | 2024.07.15 |
|---|---|
| 2023/07/24__ReactJS(4) (0) | 2023.07.24 |
| 2023/07/21__ReactJS (0) | 2023.07.21 |
| 2023/07/20__ReactJS(3) (0) | 2023.07.20 |
| 2023/07/19__ReactJS(2) (0) | 2023.07.19 |