TL;DR

비동기 처리의 반환 값을 State의 초기 값으로 만들려면 useEffect를 사용하십시오.

Skeban을 잘 부탁드립니다

소개

최근 Skeban v0.1.0을 출시했습니다.
개인 이용에만 대상을 좁힌 Electron 제 칸반 앱입니다.

앱 이름은 Sketches your brain in kanban에서 명명했습니다.
결코 그 스케반이 아닙니다.

동작 샘플

사용미치

일반적인 칸방의 사용법인Todo 관리나, 작은 정보의 정리에 부디.

만든 이유

어쨌든 계정이 필요없는 칸방을 원했기 때문입니다.
어차피 만들면 MIT 라이센스의 OSS로 하려고 생각해 OSS가 되었습니다.

설치 방법

Windows

설치 프로그램 을 다운로드하여 설치하면 완료되었습니다.

Mac

Mac 버전에 관해서는 Mac이 없기 때문에 설치 프로그램을 생성 할 수 없었습니다.
따라서 다음 명령으로 Github에서 소스를 복제하고 패키징을 수행하여 설치 프로그램을 만듭니다.

git clone https://github.com/roottool/Skeban.git
yarn install
yarn run build
yarn run pack:mac

기술 스택

Electron

React

unstated-next

react-beautiful-dnd

TypeScript

indexedDB

webpack

babel

이번에는 create-react-app을 사용하지 않고 webpack과 babel 설정을 직접 수행했습니다.
이유는 지금까지 webpack과 babel 설정을 한 적이 없었기 때문에 경험치를 쌓기 때문입니다.
그러나 create-react-app의 간편함을 다시 실감하게 되었습니다.
D&D 구현은 react-beautiful-dnd 을 사용했습니다.

unstated-next

unstated-next 은 Redux와 같은 앱 전체에서 상태 관리를 수행할 수 있는 패키지입니다.
Redux와 다른 점은 React에 구현 된 React Hooks에서만 작성할 수 있다는 것입니다.
이번 앱 작성에 한해서 말하면 Redux에서는 친숙한 Reducer , Dispach 이나 ActionReact Hooks의 useState에서 만든 상태 업데이트 함수만으로 앱을 만들 수있었습니다.

indexedDB

indexedDB 은 브라우저에 설치된 DB입니다.
래퍼 Dexie.js을 사용했습니다.

고생 포인트

DB로부터의 레코드 취득이 비동기이기 (위해)때문에, useState 의 인수에 async 함수를 만들어 반환값에 DB로부터의 취득 결과를 초기치로 했습니다.
하지만, Promise와 useState 로 설정하고 있던 취득 결과의 배열형과의 형태 불일치 에러가 되어 버렸습니다.
그래서 상태 마운트시와 업데이트시에 실행되는 useEffect로 해결했습니다.
이것은. useEffect를 Update 타이밍에서만 사용하고 싶습니다. 이라는 stackoverflow의 대답을 이용하고 있습니다.
마운트시의 타이밍에, DB로부터의 레코드 배열을 useState 로 작성한 상태 갱신 함수로 상태 갱신을 실시했습니다.

마지막으로

localStorage를 사용해 보거나 개별 컴퍼넌트의 State만으로 만들 수 없는가와 여러가지 모색하고 있었습니다만, 지금의 형태에 침착했습니다.
스케반을 잘 부탁드립니다.