이벤트 버블링을 이용해보기

리팩토링 진행 중 라디오 버튼을 이용하여 카테고리별로 정렬된 목록을 볼 수 있는 기능을 개선하였다.

 

해당 카테고리를 누르면 카테고리별로 정렬됨

나의 첫 프로젝트에서 제작했던 코드는 다음과 같았다.

<div className="sort-wrap">
            <input
              type="radio"
              className="radio-btn"
              value="reviewCnt"
              id="review"
              name="sort"
              defaultChecked={sort ? true : false}
              onChange={onChangeSort}
            />
            <label htmlFor="review">· 리뷰순</label>
            <input
              type="radio"
              className="radio-btn"
              value="themeScore"
              id="score"
              name="sort"
              onChange={onChangeSort}
            />
            <label htmlFor="score">· 별점순</label>

            <input
              type="radio"
              className="radio-btn"
              value="totalLikeCnt"
              id="like"
              name="sort"
              onChange={onChangeSort}
            />
            <label htmlFor="like">· 좋아요순</label>
            <input
              type="radio"
              className="radio-btn"
              value="themeName"
              id="abc"
              name="sort"
              onChange={onChangeSort}
            />
            <label htmlFor="abc">· 가나다순</label>
          </div>

말 그대로 하드코딩 그 자체였다. 사실 불과 1년도 안되었지만 당시엔 반복되는 기능들을 왜 직접 다 작성하면서도 불편함을 못느꼈는지 모르겠다...

 

지금은 다음과 같이 방식을 바꿨다.

 

1. value와 label을 담고 있는 배열을 하나 작성한다.

export const categoryIndex = [
  { value: "reviewCnt", label: "· 리뷰순" },
  { value: "score", label: "· 별점순" },
  { value: "like", label: "· 좋아요순" },
  { value: "themeName", label: "· 가나다순" },
];

 

2. map 메서드를 이용하여 반복한다.

<CategoriesWrapper onChange={onChangeCategory}>
          {categoryIndex.map((category) => {
            const isChecked = category.value === sort;
            return (
              <CategoryWrapper>
                <CategoryInput
                  name="category"
                  type="radio"
                  id={category.value}
                  value={category.value}
                  checked={isChecked}
                />
                <CategoryLabel htmlFor={category.value}>
                  {category.label}
                </CategoryLabel>
              </CategoryWrapper>
            );
          })}
        </CategoriesWrapper>

 

여기서 잘 살펴볼 점은 이벤트 또한 반복되지 않도록 이벤트 버블링을 이용했다는 점이다. 뿐만 아니라 코드의 양 자체가 줄어들었고, 가독성이 매우 좋아졌다. 그리고 추가적인 정렬 카테고리가 추가되는 경우, 배열에 추가만 해주면 되는 간편함이 있기 때문에 수정하기도 훨씬 편해졌다.

 

이벤트 버블링 이란?

하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 현상을 말한다.

이벤트 버블링을 이용하여 상위 요소에 이벤트를 할당하여 사용하는 방식을 이벤트 위임 이라고 한다.

 

이벤트 위임을 하면 다음과 같은 장점이 있을 수 있다.

 

1. 메모리 사용 감소 : 각각의 하위 요소에 개별적인 이벤트 리스너를 할당하는 경우에 메모리에서 각 이벤트 리스너의 인스턴스를 유지해야한다. 하지만 이벤트 위임을 해두면 하나의 이벤트 리스너만 유지되면 되므로 메모리 사용이 줄어든다.

 

2. 이벤트 핸들링 성능 향상 : 이벤트 리스너는 이벤트가 발생할 때마다 실행된다. 각각의 하위 요소에 이벤트 리스너를 할당하는 경우, 성능에 영향을 줄 수 있다.

 

3. 코드의 간결성 : 개별 요소에 이벤트 리스너를 할당하지 않고 부모요소에 한번에 위임하여 코드를 관리하기 쉽게 바꾼다.