확장 가능한 객체 트리 뷰

소개

이 랩에서는 React 에서 확장 가능한 객체 트리 뷰를 만드는 방법을 배웁니다. 이 컴포넌트는 복잡한 데이터 구조를 구조화되고 축소 가능한 형식으로 표시하는 데 유용합니다. useState 훅과 재귀를 사용하여 축소 가능한 콘텐츠가 있는 JSON 객체 또는 배열의 트리 뷰를 렌더링합니다. 이 랩이 끝나면 데이터를 명확하고 체계적으로 표시하기 위해 트리 뷰 컴포넌트를 생성하고 사용자 정의할 수 있습니다.

확장 가능한 객체 트리 뷰

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

다음 코드는 JSON 객체 또는 배열의 축소 가능한 트리 뷰를 렌더링합니다. useState() 훅을 사용하여 isToggled 상태 변수를 생성함으로써, toggled prop 을 전달하여 콘텐츠의 초기 상태 (축소/확장) 를 결정할 수 있습니다. 컴포넌트의 모양은 isParentToggled, isToggled, name 및 data에 대한 Array.isArray() 확인을 기반으로 결정됩니다.

data의 각 자식에 대해 객체인지 배열인지 결정하고 적절한 스타일로 하위 트리 또는 텍스트 요소를 재귀적으로 렌더링합니다. 컴포넌트 상태를 토글하려면 <span> 요소를 렌더링하고 해당 onClick 이벤트를 바인딩하여 컴포넌트의 isToggled 상태를 변경합니다.

CSS 스타일은 margin, position, border, 및 display 속성을 포함하여 컴포넌트의 모양을 위해 정의됩니다.

const TreeView = ({
  data,
  toggled = true,
  name = null,
  isLast = true,
  isChildElement = false,
  isParentToggled = true
}) => {
  const [isToggled, setIsToggled] = React.useState(toggled);
  const isDataArray = Array.isArray(data);

  return (
    <div
      className={`tree-element ${isParentToggled && "collapsed"} ${
        isChildElement && "is-child"
      }`}
    >
      <span
        className={isToggled ? "toggler" : "toggler closed"}
        onClick={() => setIsToggled(!isToggled)}
      />
      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
      {isDataArray ? "[" : "{"}
      {!isToggled && "..."}
      {Object.keys(data).map((v, i, a) =>
        typeof data[v] === "object" ? (
          <TreeView
            key={`${name}-${v}-${i}`}
            data={data[v]}
            isLast={i === a.length - 1}
            name={isDataArray ? null : v}
            isChildElement
            isParentToggled={isParentToggled && isToggled}
          />
        ) : (
          <p
            key={`${name}-${v}-${i}`}
            className={isToggled ? "tree-element" : "tree-element collapsed"}
          >
            {isDataArray ? "" : <strong>{v}: </strong>}
            {data[v]}
            {i === a.length - 1 ? "" : ","}
          </p>
        )
      )}
      {isDataArray ? "]" : "}"}
      {!isLast ? "," : ""}
    </div>
  );
};

.tree-element {
  margin: 0 0 0 4px;
  position: relative;
}

.tree-element.is-child {
  margin-left: 16px;
}

div.tree-element::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 1px;
  height: calc(100% - 48px);
  border-left: 1px solid gray;
}

p.tree-element {
  margin-left: 16px;
}

.toggler {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid gray;
  cursor: pointer;
}

.toggler.closed {
  transform: rotate(90deg);
}

.collapsed {
  display: none;
}

const data = {
  lorem: {
    ipsum: "dolor sit",
    amet: {
      consectetur: "adipiscing",
      elit: [
        "duis",
        "vitae",
        {
          semper: "orci"
        },
        {
          est: "sed ornare"
        },
        "etiam",
        ["laoreet", "tincidunt"],
        ["vestibulum", "ante"]
      ]
    },
    ipsum: "primis"
  }
};
ReactDOM.createRoot(document.getElementById("root")).render(
  <TreeView data={data} name="data" />
);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 확장 가능한 객체 트리 뷰 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.