HoneyMoney Refactoring (+Component 재사용) (2)

이번엔 Saving(적금)을 해보자.

 

Deposit(예금)과 동일하다고 생각할 수 있으나, 디테일 페이지에서 자유적립식과 정액적립식을 구분해놨기 때문에, 예금처럼 상품명 만으로는 해당 상품을 찾기 어렵다. 필요다면 Option의 데이터 정보에 자유적립인지 정액적립인지 구분하여 조건문을 통해 filter하거나 새로운 배열을 할당하면 된다. 하지만 도표는 양쪽 다 출력할 예정이기 때문에 결국 Detail을 dialog할 때는 같은 정보를 보여줄 예정이다. 즉! 적금과 똑같이 사용할 것이다. (실제 Detail 데이터는 도표기준으로 구분하지 않았다, List만 구분됨)

 

그리고 추가로 어제는 예상치 못했는데, dialog는 view(최상위 컴포넌트)에 변수가 존재하는데, 하위 컴포넌트에 OK 버튼이 존재하는 문제로 버튼이 작동하지 않는 경우가 발생했다. 이 또한 수정해줘야한다.

 

생각한 방법으로는 두가지가 있는데,

 

1. 하위 컴포넌트의 이벤트를 상위 컴포넌트 변수로 전달하는 방법 (emit)

2. v-dialog까지 하위 컴포넌트로 내린 후, 상위 컴포넌트의 함수에 따른 dialog 변수를 하위로 전달하는 방법 (props)

 

먼저 1번 방법을 시행해볼까?

 

Emit (하위 => 상위)

 

가장 먼저 emit을 사용하기 위해 등록해준다

해당 버튼의 함수를 등록해주고

상위 컴포넌트로 데이터를 넘겨준다

하위 컴포넌트가 정의된 부분에 정보를 받아오는 방법으로 dialog = false를 전달

 

비슷한 방식으로는 close-dialog 자체가 이벤트이기 때문에 상위 컴포넌트에서 함수를 정의한다면 Event 발생 함수로 처리해서 dialog의 변수를 변경해도 된다. 하지만 복잡한 이벤트가 아니라면 하려면 위처럼 사용할 수 있다. 결론적으로 emit을 사용하는 것이 익숙하다면 별로 어려운 점은 없어보인다.

 

Props (상위 => 하위)

 

상위 컴포넌트에 dialog 변수'만' 전달

상위 컴포넌트에서 하위 컴포넌트로 전달

해당 변수를 받아 dialog 상태를 정의

상위에서 받은 변수를 v-model로 사용

슬픈 결말

 

props를 통해 받은 데이터는 읽기 전용 데이터라는 것을 확인할 수 있다. 물론 해결할 수 없는 것은 아니다. 1번처럼 emit을 통해 상위로 dialog 변수를 변경해주면 되니까. 하지만 이럴거면 2번안쓰지!!

 

결국 일단 1번을 채택했다. 2번이 더 재사용하기 좋은 Component가 될 것 같으나 배보다 배꼽인 것 같으니 좋은 경험이었다고 생각하고 일단 패스! 갈길이 멀다.

---

 

이렇게 DepositDetailComponent와 SavingDetailComponent가 생성되었다. 모든 페이지에 적용 시켜볼까?

 

MapView

젠장... 사용한 변수의 형태가 다르다.

results 배열을 가져올 때, 각 데이터마다 dialog 값을 할당시켜주었다.

 

문제는 앞서 만들어놓은 Component에서는 store에 저장된 데이터를 가져오지만 해당 페이지에선 은행 검색(keyword)를 통해 리스트업을 한 후에 해당 상품 클릭시 result에 저장된 데이터를 전개해버렸다. 역시 구현에만 급급하면 이렇게 꼬이는 경우가 생기는구나 싶다.

 

또 분기점이 생겼다.

1. 새로운 Map 전용 Component를 만든다

2. 이미 만들어 놓은 DetailComponent의 형태를 변형한다

 

사실 1번은 어렵지 않다. 이미 동일한 작업을 했으니까. 2번을 좀 더 고민해보기로 했다.

 

클릭 이벤트가 발생되었을때, 내부에서 데이터를 띄우는 것이아니라 store로 연결해주면 되지 않을까? 이렇게 재사용하기 위해 리팩토링을 진행하니까 말이다.

해당 방법으로 도전

배열(results)에 데이터를 담을 때, type을 명시해서 조건문을 통해 Detail 페이지를 찾아갈 수 있게 할 예정이다.

조건문을 통해 예금과 적금에 대한 dialog를 분류해주었다.

dialog 스위치 역할을 하는 두개의 변수 할당!

이렇게 하위 컴포넌트에서 데이터를 받아 오는것 까지 완료!

 

 

284줄 = > 137줄로 확실하게 다이어트 하게되었다.

하지만 큰 문제가 발생했는데? To be continue...