헤맨 것
페이지를 이동할 때 컴포넌트가 생성되게 했다.
엄연이 따지면 App컴포넌트가 한 페이지고 Sidebar와 EditFrame은 자식 컴포넌트지만
나는 각각 두 영역을 페이지로 사용하고 싶었기 때문이다. 왜냐하면 두 영역에 대한 로직을 각 App에 합쳐서 작성하는 것이 아니고 각 컴포넌트에 몰아넣고 싶었다.
그래서 각 페이지에 대한 데이터를 App에서 부르고, 상태에 저장해서 EditFrame을 리렌더링하는게 아닌 EditFrame자체에서 데이터를 부르고 url변경될 때마다 새롭게 생성되도록(데이터를 부르도록)했다.
하지만 이 경우 문제가 있었다..
페이지가 외부 데이터를 가져와 렌더링되어야 할 경우에 기존 방법은 아래와 같다.
컴포넌트가 생성되고 돔이 그려지기 전에 setup함수에서 데이터를 부르도록 하면 이후 메소드들 전부에 constructue함수에 async를 걸어줘야하기 때문에 번거로웠다.
그렇기에 빈 데이터로 먼저 렌더링을 한 후, 데이터가 불려지면 리렌더링을 하도록 구현했었다.
하지만 이럴 경우 문서가 바뀔 때마다 매번 빈 값으로 먼저 렌더링이 되고나서 실제 데이터로 렌더링되기 때문에 부드럽게 변경이 안됐다. 기능상으론 문제없지만 사용성이 안좋았다.
아예 전체 페이지 자체가 바뀌는거면 상관없지만 하지만 노션같은 경우에는 한 페이지에 sidebar, editor 두 영역이 있고, url이 바뀌면 editor영역만 바뀌기 때문이다.
결국에는 url이 변경될 때마다 App컴포넌트에서 데이터를 부르고, 데이터가 받아지면 그대로 EditFrame컴포넌트에 전달해 생성되게 했다.
async route(target) {
const { pathname } = window.location;
if (pathname === '/') {
new EditFrame(target, { id: '', title: '', content: '' });
return;
}
if (pathname.indexOf('/pages/') === 0) {
const [, , pageId] = pathname.split('/');
const { title, content } = await getDocument(pageId);
new EditFrame(target, {
id: pageId,
title,
content,
onUpdatePageList: () => {
this.Sidebar.fetch();
},
});
return;
}
}하지만 이 방법이 과연 맞는 것일지 모르겠다.
차라리 App컴포넌트를 전체 페이지로 보고 Sidebar, EditFrame의 데이터 로직을 전부 App컴포넌트에서 관리하는게 맞는 방법인지 고민된다. 두 컴포넌트가 상호작용 할 일이 있을 것이기 때문이다.
각 컴포넌트의 데이터 로직을 훅으로 분리하든가, 전역상태로 관리하든가.. 생각을 더 해봐야겠다.
앞으로 할 것
- 히스토리 풀백 적용되도록 하기 (진짜 외않대?)
- 새로고침해도 토글 상태 유지되도록 하기
- 로컬스토리지 사용해 렌더링 속도 개선하기
