history API를 배우면서 SPA의 작동 방식을 알게되었다.
SPA는 Single Page Applction이라는 뜻인데
서버에서는 index.html만 처음 내려받고 index.html에 요소들만 다시 그려주는 방식이다. 즉, url을 보고 어떤 페이지를 그릴 건지 동적으로 처리하는 것이다. 일반적인 정적인 웹페이지는 각 페이지가 Html파일로 존재하고 url이 파일 경로와 이름이었다.
SPA로 페이지를 구현하기 위해 historyAPI를 이용할 수 있다.
URL 생성 후 저장
1. 페이지 이동을 연결하는 요소에 data속상이나 href등을 이용해 고유 id 를 설정한다.
2. 요소에 이벤트를 걸어, 이벤트 발생시 id를 가져와서 Url을 만든다.
3. 만든 url을 history.pushState함수를 이용해 세션 히스토리에 저장한다.
route 처리
1. window.location객체에서 현 상태의 pathname(url)를 가져온다.
2. 조건문을 이용해 각 url마다 렌더링을 설정한다.
3. 현재 url이 조건에 맞는 경우, 해당 url로 서버에 데이터 요청을 한다.
4. 받아온 데이터로 화면을 그린다
5. root Element에 연결한다(url만 먼저 변경되어 있는 상태).
this.route = () => {
$target.innerHTML = "";
const { pathname } = window.location;
if (pathname === "/") {
// root페이지 일 경우
postsPage.setState(); // post리스트를 가져오고, 부모에 연결한다
} else if (pathname.indexOf("/posts/") === 0) {
// url에 id가 같이 있을 경우
const [, , postId] = pathname.split("/"); // id를 뽑는다
postEditPage.setState({
postId,
post: { title: "", content: "" },
}); // postEditPage의 id상태를 바꾼다, id를 가지고 데이터를 불러오기 때문에 이때 Post값은 없어도 된다
}
};
this.route();요약
- 링크 이동을 할 element에 이벤트를 걸어 고유 아이디를 가져와 url텍스트를 만든다.
- history.pushState함수로 세션 히스토리에 저장한다.
- 위의 과정으로 url이 먼저 바뀐다.
- 그러면 window.location객체에서 현 상태의 pathname(url)를 가져온다.
- 해당 url로 서버에 데이터 요청을 한다.
- 받아온 데이터로 화면을 그린다.
- rootElement에 해당 페이지를 연결한다
자식 컴포넌트를 그려줘야 한다면 부모의 상태를 먼저 바꾼 후(id:url)
바뀐 부모의 상태로 데이터를 불러오고, 그 데이터로 부모의 상태(content:data)를 바꾼 후 자식의 상태(content:data)를 바꿔줘서 렌더링되게 한다.
컴포넌트 방식의 구현에서 부모의 상태가 바뀌면 자식의 상태도 같이 바뀌는 것을 잘 고려해야한다.
지금까지 단일 페이지만 만들어보았는데 여러 페이지를 다룰 수 있는 법을 알게되어서 좋긴했지만 너무 어렵고 복잡해서 겨우 이해했다..
실습으로 만들어본 것도 아주 간단하지만 이렇게 복잡한데,
앞으로 더 규모가 큰 서비스를 어떻게 구현할지 좀 막막해졌다.
많이 만들어보면서 익숙해져야겠다.
