오늘은 좀 더 눈에 보이는 React SPA 실습을 진행했다.
JS DOM을 사용할 때 보다 훨씬 간결하고 편리하게(?) 사용할 수 있는 것 같다!
웹 애플리케이션이란?
: 동적인 기능을 가진 웹
웹 브라우저 환경에서 사용할 수 있는 응용 소프트웨어
라우팅이란?
: 다른 주소에 따라 다른 뷰를 보여주는 것
: 경로에 따른 뷰 변경
Multiple-page Application에서는 페이지 이동을 할 때마다 HTML 파일로 된 페이지 전체를 불러와야 했다. (=깜빡인다)
웹 사이트가 점점 복잡해지고 애플리케이션 형태를 가지게 됨에 따라 사용자와 서비스 간의 상호작용이 많아졌고
중복된 요소들을 매번 불러오는 것은 서버와의 불필요한 트래픽 증가와 사용자 경험의 저하를 야기했다.
페이지 이동을 할 때, 페이지 갱신에 필요한 데이터만 서버에서 받아와서 페이지 업데이트를 한다.
서버로부터 완전히 새로운 페이지를 불러오지 않아서 사용자의 interaction에 빠르게 반응한다.
따라서 서버 과부하 문제가 현저히 낮아지고 더 나은 사용자 경험을 제공한다.
HTML 파일은 비어있다 싶이 하고 JS 파일에 대부분의 정보가 들어있다.
따라서 첫 화면 로딩 시간이 길고 검색 엔진 최적화가 좋지 않으나 개선되는 중이다.
와이어프레임을 바탕으로, 각 컴포넌트들이 독립적인 기능을 수행하면서도 웹 앤 안의 데이터를 유기적으로 주고받을 수 있게 설계해야 한다❗️
npm install react-router-dom // @^6.3.0
터미널에서 npm install 후에 해당 js 파일에서 import 해주어야 한다.
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
<BrowserRouter>
: 최상위 요소여야 한다.<Routes>
<Route>
: Routes의 하위요소여야 page 주소가 render 가능하다.<Link>
: 함수가 아니기 때문에 조건을 걸 수 없다<useNavigate>
: 함수기 때문에 조건문을 작성하여 조건에 따라 페이지 이동을 구현할 때 쓸 수 있다. 주로 변수에 할당하여 사용한다.import {BrowserRouter, Routes, Route, Link} from 'react_router_dom';
const App = () {
return (
<div>
<BrowserRouter>
...
<Routes>
<Route page='/' element={<페이지를 구현한 다른 JS파일을 import한 변수/>}/>
<Route page='/...' element={<페이지를 구현한 다른 JS파일을 import한 변수/>}/>
</Routes>
<div>
<Link to="/">home</link>
</div>
...
</BrowserRouter>
</div>
);
};
export default App;
<useNavigate>
사용하기
BrowserRouter 내부에 작성해야 동작하니 주의할 것!
import {useNavigate} from 'react-router-dom';
const Myapp = {
const navigate = useNavigate(); //변수 정의
return (
...
<button onClick={() => navigate(-1)}>뒤로가기</button>
...
)
}
export default Myapp;
create-react-app과 react-router-dom을 이용해서 뭐라도 만들어봐야겠다 ㅎ.ㅎ