[TIL] Vue 트리구조 component에 대한 고찰

구조를 잘 짰다는 칭찬을 받아 기분이 좋았다ㅎ

트리구조를 보여주는 vue 페이지를 해당 항목만 보여주는 트리구조로 수정하여 component로 만들어야 했다.

이틀동안 어떤 식으로 구현해야 할 지 고민했다. 일단 이미 존재하는 다른 컴포넌트 파일을 샅샅이 뒤지고 트리구조 페이지 파일을 하나하나 살펴봤다.

 

일단 props로 해당 항목의 id랑 type을 전달 받아 어떤 곳에서 넘어오는 데이터인지 알 수 있도록 해야 했다.

값은 아래처럼 넘겨주도록 했다.

watch의 infoData엔 선택하는 항목의 값만 들어오기 때문에 infoData의 id를 이용하기로 했다.

              <b-tab
                dev-comment="트리 구조"
                title="트리 구조"
              >
                <tree-view
                  :id="selectedId"
                  type="Type"
                />
              </b-tab>

// import 등 생략

  watch: {
    infoData (value) {
      if (value !== null) {
        this.selectedId = value.id
      }
    }
  },

 

트리구조 페이지에선 다음과 같이 처리했다.

props로 id와 type을 받아 트리 구조에 데이터를 넣어주는 함수에서 if문 처리했다.

  // 생략
  
  props: {
    id: { // 해당 항목의 id
      type: Number,
      required: false,
      default: null
    },
    type: { // 해당 항목의 type
      type: String,
      required: false,
      default: null
    }
  },

// 생략

// 트리 구조에 데이터를 넣어주는 함수에서 if문 처리
if (treeView.id === this.id || this.type !== 'Type') {

// 생략