[트리] 폴더명 수정 시 하위 목록이 삭제되는 오류 fix

[ro-ssang]

이슈

• 57

설명

1. 이름 변경시에, validation 확인을 한다(중복된 이름이 있는지, 빈 문자열인지 등).
2. validation 조건을 통과한 후, 현재 수정중인 Tree 객체의 정보를 변경(e.g. 공백제거)하는데, 이 때, treeChildren 프로퍼티도 같이 제거되어서 렌더링이 되지 않는다.

// RecursiveTreeItem.ts

const handlBlurNewTreeInput = () => {
  if (treeData.treeStatus === TreeStatusInfo.CREATE) {
    // ...
  } else if (treeData.treeStatus === TreeStatusInfo.RENAME) { // (1). Tree를 수정할 경우
    if (checkEmptyTreeName()) {  // (2) 빈 문자열인지 확인
      // ...
    } else if (checkValidTreeName()) { // (3) 중복된 이름이 존재하는지 확인
      checkReadyToRename(); // (4) Tree 객체 변경
    }
  }
}

const checkReadyToRename = () => {
  const response: ValidationResponse = validateRenameTree(treeData);
  // (5) 변경한 Tree 객체를 리렌더링
  setTreeData(response.processedData)
  setIsReadyToRename(response.isValid);
}

// validation.ts

export const validateRenameTree = (tree: Tree): ValidationResponse => {
  const response: ValidationResponse = {
    isValid: false,
    processedData: tree,
  };
  validating: try {
    const processedTree: Tree = { ...tree, treeName: tree.treeName.trim() };
    // 문제가 되는 부분. Tree 객체의 treeChildren 프로퍼티를 제거하기 때문에, 이름 변경시 하위 목록이 삭제되는 것처럼 보임.
    // treeContent 부분도 논리적으로 이름 변경할 때 제거되면 안되므로, 아래 두 줄을 제거하였음.
    delete processedTree.treeContent;
    delete processedTree.treeChildren;

    if (processedTree.treeId <= 0) break validating;
    if (!processedTree.treeName) break validating;

    processedTree.treeStatus = TreeStatusInfo.RENAME;

    response.isValid = true;
    response.processedData = processedTree;
  } catch (err) {
    throw err;
  }

  return response;
};

[woogieReal]

아아 이런 이슈로 생긴 문제였군요. 얉은 복사를 간과했네요. 그런데 validation 메소드에서 delete로 treeContent와 treeChildren 프로퍼티를 제거하는 것은 이유가 있습니다.

해당 validation 메소드는 API 호출에 필수적인 항목을 체크하는 역할도 하지만 API 호출에 불필요한 데이터는 삭제 하도록 하고 있습니다.

treeContent와 treeChildren의 경우 데이터 양이 많고(물론 많아 봤자입니다만) 트리(폴더&파일)의 이름을 바꿀 때는 불필요한 데이터여서 삭제를 하고 보내도록 한 것입니다.

그냥 delete 코드를 없애기는 그렇고 조금 고민을 해보겠습니다.

감사합니다 👍

[ro-ssang]

해당 validation 메소드는 API 호출에 필수적인 항목을 체크하는 역할도 하지만 API 호출에 불필요한 데이터는 삭제 하도록 하고 있습니다.

treeContent와 treeChildren의 경우 데이터 양이 많고(물론 많아 봤자입니다만) 트리(폴더&파일)의 이름을 바꿀 때는 불필요한 데이터여서 삭제를 하고 보내도록 한 것입니다.

아하! 이런 의도가 있었던건지는 몰랐었네요. 저도 좀 더 코드를 보고 어떻게 개선할지 고민해 봐야겠어요. 🤔

다음에 전체적으로 어떤 흐름으로 동작하는지 문답하는 시간을 가져보는 것도 좋을 것 같아요! 😁

리뷰하신다고 고생하셨습니다~! 👏👏👏

[woogieReal]

다음에 전체적으로 어떤 흐름으로 동작하는지 문답하는 시간을 가져보는 것도 좋을 것 같아요! 😁

다음주에 한 번 이야기 나누는 시간을 가지면 좋을 것 같아요 👍

[woogieReal]

코드를 봤는데 지금으로서는 로사가 수정한 방법이 최선인 것 같습니다. 수정해 보려고 했는데 뭔가 깔끔하게 안떨어지네요.

하다보니 폴더명을 수정할 때 input창을 클릭하면 하위 트리가 열리고 닫히는 문제가 있어서 수정했습니다. 리뷰 부탁드립니다~

[woogieReal]

코드 확인했는데 이상 없는 것 같습니다~ 추가하신 코드는 이 PR의 이슈와는 별개의 이슈인거 같아요. 다음에는 새로운 이슈를 만들어서 분리를 하는게 좀 더 명확해지지 않을까 생각합니다!

아하 그렇네요 😂 그렇게 하겠습니다. 감사합니다!