Tree View

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상

TreeView 컴포넌트의 LeafNode의 name을  부모의 sibling 컴포넌트인 displayNode 컴포넌트에  전달해야 하는 현상이 있었다.

toggleNodeById함수에서 자식 노드가 없을 때 LeafNode의 Name만 displayNode의 컴포넌트에 전달하는 방법을 toggleNodeById 내부에서 해결하려고 했는데 실패했다.

<Container>
  <TreeNav>
    <TreeView initialTree={tree} />
  </TreeNav>
  <DisplayNode />
</Container>

   

const toggleNodeById = (tree, id) =>
  tree.map(node => ({
    ...node,
    isSelected: !node.children && node.id === +id,
    ...(node.id === +id && { isOpen: !node.isOpen }),
    ...(node.children?.length && { children: toggleNodeById(node.children, id) }),
  }));

   

- 발견

 위의 현상을 Click 이벤트 핸들러 내부로 옮겨서 문제를 해결 할 수 있었다.

 

// 전역 상태
const setLeafNode = useSetRecoilState(leafNodeName);

...

const handleClick = (hasChildren, name, id) => {
  if (!hasChildren) setLeafNode(name);
  setTree(toggleNodeById(tree, id));
};

   

 

- 배운점 및 선언

로직을 너무 어렵게 생각 하지 말고 쉽게 쉽게 갈 수 있는 방법도 많이 있음으로 천천히 생각해보는 습관을 가져야겠다.