React 관련 싹훑기(7) - Redux 앱 구상 및 간단한 상태설계

Notion처럼 페이지별로 블럭을 구성하는 앱을 만들어보려고 한다. 

 

상태 설계하기

아무래도 나중에 바꾸겠지만, 우선 page와, page별 블럭을 구성하는 상태를 구성하기로 했다. 

손으로 상태 설계한것

react-redux 튜토리얼을 참고했을때 notion처럼 좌측에는 페이지가 추가되고, 내부에는 여러개의 block데이터들이 중첩될때는 위처럼 해보면 어떨까 싶다. 

 

reducer는 pagesReducer와 blocksReducer를 두개를 구성하고, pages를 생성할때 pageIdes를 추가하고, pageById에는 해당 page의 메타 정보를 저장할려고 한다. 그리고 blocks는 특히 root에 있는 block들의 id를 추가하려고한다. 

 

blocks는 본격적으로 id에 대해서 block의 정보를 가지고 있게 하려고 한다. blockId는 contents랑 하위 block의 id들을 가지고 있게하려고 한다. root에 추가하면 page에 있는 각페이지의 블럭에 id가 추가되지만, 특정한 블럭 하위에 block이 추가가되면 여기다가 id를 추가하고, blocks state에 새로운 block정보를 추가하면 되지 않을까 한다. 

 

 

 

프로젝트 시작하기

간단히 create-react-app으로 구성하려고 한다. 

npx create-react-app custom-notion
yarn add redux react-redux
yarn add -D redux-devtools
// tailwindCSS
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add @craco/craco

tailwindCSS 설정도 조금했다. 

 

- setup은 여기 브랜치에서 확인할 수 있다. 

 

Redux 설정 좀 하기

아주간단하게 좌측에 페이지가 추가되고, main에 블럭이 추가될수 있도록만 구현했다. 

https://github.com/hayoung0Lee/custom-notion/tree/some-redux-setting

hayoung0Lee/custom-notion

아직 중첩되는 구조까진 하지 않았는데, 이제 state쪽을 본격적으로 개선해봐야겠다. 

 

 

후기

오늘 redux 튜토리얼을 보고 새로 상태를 생각해서 앱을 만들어보는 것을 시작했는데, 앱의 상태도 DB 설계처럼 빡세게 제대로 설계를 해야한다는게 재미있는것같다. id를 따로 빼서 관리를 하는게 당연히 효율적인데, 이때까진 상태관리에 직접 적용을 못하다가 오늘 많이 해보니까 좋았다.