React 관련 싹훑기(9) - 중첩되게 block이 들어갈 수 있도록 구성하기 + Tab기능(아직은 two depth) + focusing

저녁에 한일은 중첩되게 block을 구성하는 것이었다. 

 

Recursive Component

내가 만든 EditableBlock컴포넌트는 내부에서 또 하위 컴포넌트를 불러와야한다. 그래서 react 컴포넌트도 recursive하게 호출이 되나 봤더니, 역시 함수이기때문에 가능하다. 

https://dev.to/knowit-development/recursive-components-in-react-37ka

 

아주 엉망진창이지만 아래는 내 코드이다. 

import ContentEditable from "react-contenteditable";
import { useRef, useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getBlockState, getCurrentBlockInfo } from "../redux/selectors";
import { updateCurrentBlock } from "../redux/actions";
import { addTab } from "../redux/actions";

const EditableBlock = ({
  // props들
}) => {
  // 어떤 설정들....
  
  return (
    <>
      <ContentEditable
        // props들
      />
      {/* subEditable */}
      {blockInfo.blocks.length > 0 &&
        blockInfo.blocks.map((blockId) => {
          return (
            <EditableBlock
              // props들
            />
          );
        })}
    </>
  );
};

export default EditableBlock;

 

이런식으로 재귀적으로 컴포넌트를 호출 할 수 있다. 종료조건은 더이상 하위 컴포넌트가 없을때이다. 

 

 

 

Tab기능 구현하기

Tab은 최대 4depth까지허용할까 싶긴한데, 일단은 root를 기준으로 한번 탭이 가능하다. 아래는 pageReducer의 initialState이다. 

 

const initialState = {
  pageIds: [0],
  pageById: { 0: { pageName: "Intro Page", blocks: [0, 1] } },
};

최초에 blocks부분에 들어간 blockId를 Tab이 되는 곳의 위 컴포넌트의 하위 컴포넌트로 id를 옮겨주기만 하면 된다. 

 

 

 

Tab후에 Enter로 새로운 블럭을 추가했을때의 문제

Tab을 하고 난다음 Enter를 했을때 뭔가 꼬여가지구 형제 깊이로 들어가는게 아니라 하위로 1depth추가되는 문제가있었는데, 해결은 했으나 코드가 누더기라 좀 정리되고나선 코드를 좀 엎어야할 것 같다. 

 

 

 

Tab이 들어간 경우 새로운 블럭이 추가되었을때 자동 focusing이 되지 않는 문제

일단 이것도 나중에 고쳐야겠지만, 현재는 문서의 끝에서만 블락이 추가되기때문에 가장 마지막 블럭에 focusing이 되도록 했다. 

 

 

구현 결과

 

 

후기

상태를 그래도 좀 고민해서 설계하긴했지만, action이런쪽이 좀 지저분해지는게 있어서 앞으로 개선하고 하면 Block을 추가하는것까지는 해볼 수 있을 것 같다. 현재 중첩해서 렌더링은 되는데, 탭기능이 아직 완성은 아니고 Block을 추가하고, 순서를 바꾸는 등의 기능이 좀더 완비되면 좋을 것 같다. 

 

block의 속성을 바꾸는 것은 시간이 되면 해볼것 같다. 확실히 notion앱을 만들길 잘했다는 생각이 드는게 빡센 상태 관리를 경험해보기에 딱 안성맞춤인것 같다!