[팀] 겸상 - Vue.js에서 배열에 배열을 대입했는데 서로 바인딩된 것 처럼 작동!? computed와 Spread operator를 이용해 해결!

[그림 1] 숟갈 선택화면, din-co는 이미 확정된 경우이다.

 

숟갈을 선택하고 빼는 화면을 구현해야 하는 데 이미 선택했던 숟갈을 취소하는 기능이 포함되어야 한다. 이게 상당히 상그러운 일이었다. 이 기능을 구현하기 위해서 "지금 선택할 숟갈"과 "이미 확정되었던 숟갈"을 각각 구분하여 관리할 필요가 있었다. 그래서 "selectedSpoons, fixedSpoons"라는 배열 프로퍼티를 각각 두었다.

화면이 최초 렌더링 될 때 이미 확정되었던 숟갈 요소를  selectedSpoons에 넣는 과정을 두었다(this.selectedSpoons = this.fixedSpoons;). 그 이유는 [그림 1]과 같이 "함께할 숟갈"에 표시하고 정해진 인원수 관리(3인)를 용이하게 하기 위해서였다. 그런데 여기에서 문제가 발생했다.

data() {
    return {
        ...
        selectedSpoons: [], // 현재 선택한 숟갈
        fixedSpoons: [], // 신청한 숟갈 중 이미 선택된 숟갈
        ...
    };
},
...
methods: {
	...
    async getBabsangSpoons() {
        ...
        this.selectedSpoons = this.fixedSpoons;
        ...
    },
...
}

 

위 코드에서 "this.selectedSpoons = this.fixedSpoons;"가 문제라는 것을-console.log를 찍어가며 추적하다가 비로소-알게 되었다. "지금 선택할 숟갈"이 추가되면  selectedSpoons 배열에 추가되는데 문제는 fixedSpoons 배열의 값도 selectedSpoons와 동일하게 변경되어 문제가 된 것이다. "this.selectedSpoons = this.fixedSpoons;"은 두 배열이 서로 동기화되어 작동되는 것으로 보인다.

해당 코드 부분을 다음과 같이 수정하여 문제를 해결하였다. computed에 mixSpoons라는 프로퍼티를 선언하여 selectedSpoons와 fixedSpoons와 완전히 분리한 것이다.

computed: {
    ...
    mixSpoons: function () {
        return [...this.fixedSpoons, ...this.selectedSpoons];
    },
},