[Vue.js] 선택한 row에 따라서 상세페이지 결과 출력하기

카테고리 없음

[Vue.js] 선택한 row에 따라서 상세페이지 결과 출력하기

wittyJini 2024. 5. 20. 16:20

728x90

SMALL

안녕하세요.

최근에 필자는 vue3 + spring boot + PostgreSQL 프로젝트를 진행하고 있습니다.

해당 포스팅은 기록을 위해 작성하려고 합니다.

-------------------------------------

상황

검색결과를 확인하고, 목록에 나온 row 1건을 선택하면 상세페이지가 호출되고 그 결과가 출력됩니다.
상세페이지가 이미 실행된 상태에서, 검색결과 페이지로 이동해서 다른 row를 클릭 했을 때 상세페이지에서 새로운 결과를 출력하지 못하는 상황이 되었습니다.

=> 이유 : 상세페이지 vue.js는 이미 lifeCycle이 끝난 상태여서 그렇습니다.

해결방법 1 : 파라미터 Get 방식으로 넘기기

=> GET은 데이터를 호출하는 목적으로 사용합니다.

단점 :보안에 취약하다. 보내는 길이는 한계가 있고 (약 2K가 안전) 헤더에 담아서 보내진다.URL만 알면 언제든지 호출할 수 있다.

1. 검색결과 페이지에서 row를 클릭할 때 query를 사용한다.

cellClicked(params) {
  ...(생략)
  this.$router.push({
    name : item.path, // 이동할 경로
    query: {aaa: params.data.xxx
    }
  });
}

2. 상세페이지에서 받을 때

...(생략)
created(){
    this.searchData.xxx = this.$route.query.aaa;
}

해결방법 2 : 파라미터 Post 방식으로 넘기기

=> POST는 데이터를 저장하는 목적으로 사용합니다.

요청 데이터가 HTML Body에 들어가서 보내기 때문에 외부에 요청 데이터가 노출되지 않고, 보낼 수 있는 데이터의 양도 제한이 없습니다.

1. 검색결과 페이지에서 row를 클릭할 때 params를 사용한다.

cellClicked(params) {
  ...(생략)
  this.$router.push({
    name : item.path, // 이동할 경로
    params: {aaa: params.data.xxx
    }
  });
}

2. 상세페이지에서 받을 때

...(생략)
watch: {
    $route(to, from){
        if(to.path !== from.path){ // 탭 이동 감지(to.path : List page, from.path : added tab)
            if(JSON.stringify(this.$route.params.aaa) != null){ // added tab일 때만 실행한다.
                if(this.$route.params.aaa != this.searchData.aaa){
                 // 넘겨받은 aaa와 현재 가지고 있는 aaa값을 비교해서 값이 다르면 새로 받은 값이다.
                     this.searchData.aaa = this.$route.params.aaa;
                }
                this.search(0); // search 함수 실행
            }       
        }
    }
},
created(){ // 최초 1회 실행됨
    this.searchData.xxx = this.$route.query.aaa;
}

watch는 computed와 유사하게 data 변경 시 동작하는 속성인데 값을 사용할 수도 있지만 부가적인 동작(side effect) 처리에 더 많이 사용되는 속성입니다.

computed는 data 처럼 template에서 사용되어야 동작하지만 watch는 template에서는 사용되지 않습니다.

지켜보다가 값이 변경되면 어떤 일을 처리합니다.

또한 computed가 주로 동기로 값을 리턴하는 반면 watch는 비동기로 처리되며 값을 리턴하지 않습니다.

공감 또는 따뜻한 댓글은 포스팅 작성에 큰 힘이 됩니다:)

-------------------------------------

이상으로 [Vue.js] 선택한 row에 따라서 상세페이지 결과 출력하기 포스팅을 마치겠습니다.

감사합니다.

LIST