[리팩토링] 대댓글 펼침 기능

제가 직접 만든 프로젝트입니다. 한번씩 놀러와주세요

http://pickvs.com 

---

아래 글들은 검색엔진 노출을 위한 글입니다. 

노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment)

https://www.notion.so/104b3e04784746b9a91a953566c3004b#7409a799f276443e9be045df3b07e54c

---

 

대댓글 펼침 버튼을 눌렀을때 부드럽게 펼쳐짐.

## 기존 구현 방법

댓글은 동적으로 추가될 수 있기 때문에 댓글을 추가할때 대댓글펼침버튼(노란색버튼)에 이벤트 핸들러를 달아주는 방식으로 구현했다.

하지만, 이렇게 구현했을때 다른 여러 모듈들에서 이 모듈들을 쓸데없이 참조하는 코드가 많아졌다. 그래서 어떻게 하면 모듈간 결합도를 최소화 할 수 있을까 고민하던중, 미리 대댓글 펼침 버튼에 이벤트 핸들러를 달아놓지 말고 버튼이 눌렸을때 이벤트 핸들러를 달아주고, 바로 그 이벤트를 트리거 해주는 방식으로 구현하는 방법을 생각했다.

이렇게 하면 댓글 모듈에서만 대댓글 펼침 기능을 관리 할 수 있기 때문에 훨씬 좋은 코드가 될것이라고 판단했다.

## 개선된 코드

### 버튼에 다음과 같은 이벤트 핸들러를 달아 주었다.

    this.$body.on('click', '.detail_reply_more', e => this._onExpand.call(this, e));

### 그리고 나서, 아래와 같은 콜백이 실행된다.

    _onExpand(e) {
     const $acdo = $(e.currentTarget).closest('.accordion'); //댓글 영역
     const $acdoCtrl = $acdo.find('[data-control]'); //대댓글 펼침 버튼
     this.activateAccordion($acdo); //대댓글 펼침 버튼 활성화
     $acdoCtrl.trigger('click'); //대댓글 펼침 버튼 클릭 이벤트 트리거
     this.notify('slide.refresh'); // 슬라이드 전체 높이 리프레시
     },
    
    activateAccordion(accordion) {
     $(accordion).accordion({
     transitionSpeed: 700,
     transitionEasing: "cubic-bezier(0.23, 1, 0.32, 1)"
     });
    },

    function toggleAccordion(e) {
        e.stopPropagation();
     //...code...
    }

- 대댓글 펼침 버튼은 `data-control`속성과, `.detail_reply_more` 클래스를 갖는다.
- accordion 라이브러리에서 data-control에 해당하는 엘리먼트에 클릭 이벤트에 대한 이벤트 핸들러가 미리 등록 되어 있다.(`toggleAccordion`)
- `toggleAccordion`에서 e.stopPropagation()으로 이벤트 전파를 막아주었다.
- 대댓글 펼침 버튼을 클릭 하면 다음과 같은 일들이 순서대로 벌어진다.
    1. `body`의 이벤트 위임에 대한 `_onExpand` 이벤트 핸들러 호출
    2. `activatgeAccordion`에서 대댓글 펼침 버튼에 아코디언 펼치는 이벤트 핸들러 (`toggleAccordion`)등록.(라이브러리)
    3. 대댓글 펼침 버튼에 클릭이벤트 트리거
    4. `toggleAccordion`에서 이벤트 전파 막아줌.
    5. 슬라이드 전체 높이 갱신

이렇게 되면, 그 다음부턴 대댓글 펼침 버튼을 눌러도 toggleAccordion에서 이벤트 전파가 취소되기 때문에, onExpand는 더이상 호출 되지 않을것이다. 즉 이벤트 핸들러만 달아주면 onExpand의 역할은 끝나게 된다.

[](https://www.notion.so/104b3e04784746b9a91a953566c3004b#857f31875e8f4b4ca1b7485b979877e9)

여러번 대댓글 펼침 버튼을 클릭했을때 위와 같이 `onExpand`는 딱 한번 호출된다.

이런식으로 모듈간 결합도를 줄였으며, 쓸데없이 함수가 여러번 호출되는것을 막았다.

불러오는 중입니다...